Wie kann ich den Text in der Textbox markieren?

Question

Der Code für den Textbereich.

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

Die Funktion, die

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 
    } 
} 

Die Funktion ausgeführt wird ausgeführt, sobald wir etwas in das Textfeld einfügen und alle passenden Worte sollten nur in dem gleichen Textfeld markiert bekommen.

Answer 1

Sie können Markup tatsächlich nicht in einem Textfeld darstellen. Sie können jedoch fälscht von

• sorgfältig einen div hinter dem Text
• Positionierung der innere HTML der div Halt gleiche wie die Textarea
• Fügen Sie Ihren Highlight Markup zum div

Zum Beispiel :

<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> 

die Marke Tag

und Stil

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

Für Ihre Anforderung,

• Add CSS für mark-Tag
• einen div hinter dem Textbereich hinzu.
• während ‚onpaste‘ in Textfeld, kopieren Sie den Inhalt des Textbereiches in divs innerHTML-
• Suche nach dem Text von der Eingabeaufforderung in dem div und markiert Tag hinzufügt es

den codepen Link für Details siehe