How can I highlight the text In the textbox?

Question

The code for text area.

<div> <textarea id="ta" onpaste="functionFind(event)"></textarea> </div>

The function that will be executed

function functionFind(pasteEvent) { var textareacont = (pasteEvent.originalEvent || pasteEvent).clipboardData.getData("text/html"); var tofindword = prompt("Enter the word to find"); if(textareacont.includes(tofindword )) { //What code do I write here so that all the word that matches "tofindword" gets highlighted in the same textbox only } }

The function will be executed once we paste something into the textbox and all the matching words should get highlighted in the same textbox only.

I don't think you will be able to highlight more than one section of a textbox. Also you won't be able to do anything than 'select' a section of text. If you want to highlight multiple selections you will be best off using a DIV for the text and using HTML manipulation to add highlights, such as wrapping matches in a span with a certain style. — musefan
– musefan, Commented Oct 19, 2016 at 9:09

yuvanesh · Accepted Answer · 2016-10-19 12:52:09Z

You can't actually render markup inside a textarea. However, you can fake it by

carefully positioning a div behind the textarea
Keep the div's inner HTML same as of textarea
Add your highlight markup to the div

For example:

<div class="container"> <div class="backdrop"> <div class="highlights"> <mark>This</mark> demo shows how to highlight bits of text within a textarea. <mark>Alright</mark>, that's a lie. <mark>You</mark> can't actually render markup inside a textarea. <mark>However</mark>, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. <mark>JavaScript</mark> takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. <mark>Hit</mark> the toggle button to peek behind the curtain. <mark>And</mark> feel free to edit this text. <mark>All</mark> capitalized words will be highlighted. </div> </div> <textarea> This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea> </div>

And style the mark tag

mark { border-radius: 3px; color: transparent; background-color: #b1d5e5; }

For your requirement,

Add css for mark tag
Add a div behind your text area.
while 'onpaste' in textarea, copy the content of text area into div's innerHTML
Search for the text from the prompt in the div and add mark tag for it

Refer the codepen link for details

Collectives™ on Stack Overflow

How can I highlight the text In the textbox?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related