Highlighted Word Click Event

[garysieling]

Highlighted Word Click Event

[rlamorea]

By using the css pointer-events property, you can make highlighted areas clickable, but all other areas of the textarea pass through.

Codepen example (based on @elalemanyo pen above)
http://codepen.io/anon/pen/NAomwG

[mistic100]

Use listener delegation, see http://api.jquery.com/on/

$('.highlightTextarea').on('click', 'mark', function() {

});

of course you will have to do that after highlightTextarea has been init (other wise the .highlightTextarea wrapper does not exist)

[selamhabibi]

Hi,
I do not get to run the "on click" event example. I have tried:

...
<textarea cols="50" rows="6">Lorem ipsum dolor sit amet.</textarea>

<script>

$('textarea').highlightTextarea({
  words: ['Lorem ipsum'],
});

if(jQuery().highlightTextarea) {
  console.log('Highlight Textarea ready....');
  $('.highlightTextarea').on('click', 'mark', function() {
    console.log('Highlight Textarea on click');
  });
}

</script>
...

I am grateful for any help ...

..Thanks

[elalemanyo]

Hi,

Here is a simple demo: http://codepen.io/elalemanyo/pen/BNKebp

But I think that will be better if we can have some events. We need to change the z-index, otherwise we can not trigger the click event on the mark items.

[selamhabibi]

Hi,

many thanks! The simple demo works for me after the page loaded. But when i click into the textarea and write some text I need to set the z-index to parent div again. Do you have a solution to solve this behavior.

Best regards

[selamhabibi]

Thank you very much! That's exactly what I was looking for!

[rlamorea]

FWIW, I updated that pen to show how you get which mark (by index) and what text was clicked on (since I need to do that for my use case and figure it is generally useful)