How can I insert some text into a textarea using JavaScript or jQuery?

Question

I have two textareas - one for pasting some text in it, the other is for inserting words from the first textarea after doubleclicking on them. How can I make it happen?

I've already achieved some result on the following case: 1.Paste some text into textarea 2.Double click on the word from textarea 3.See how this word appears in a div with ul inside. The word adds as a li. See the code of the case:

//html block
<textarea name="" id="text" cols="30" rows="10" ondblclick="copyPaste()" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur minus iure suscipit quam expedita? Sed minus laboriosam natus quaerat autem enim accusantium, architecto officiis aliquam pariatur. Adipisci provident tenetur velit!</textarea>
    <div id="wordList" class="wordListclass">
        <ul id="myList">
            <li></li>
        </ul>
    </div>
</body>

//js block for copy-pasting words after doubleclick on the text from the texarea with id ='text'
"use strict";

function copyPaste(){
    var selection = window.getSelection();
    console.log(selection.toString());
    var node = document.createElement("LI");               
var selectionWithButton =  selection;
var textnode = document.createTextNode(selectionWithButton);      
node.appendChild(textnode);                             
document.getElementById("myList").appendChild(node);   
}

Now I need to get rid of and add the second textarea. I want to see how words after doublclicking on the text from the first textarea appear in the second textarea. Important note - they should have the following structure:

word1
word2
word3

without html tags, because after I see the list of these words in the second textarea I want to insert them into a database, so html tags (as in the code I provided) would be undesirable. Replacing div element with textarea just didn't work, unfortunately. Thanks everyone for reading and help!

score 0 · Answer 1 · answered Jun 21 '19 at 21:47

    const myList = document.querySelector("div#wordList ul#myList") // Get the list

    function copyPaste(){
        let textAreaValue = document.querySelector("textarea#text").value //get the written text in textarea
        myList.innerHTML += `<li> ${textAreaValue} </li>` //put the "textAreaValue" in the list
    }

Something like this?

score 0 · Accepted Answer · answered Jun 21 '19 at 21:50

If i understand correctly, you just want to paste the selected word in the second textarea instead of the list.

For that, you can simply append the text using the property value of the textarea.

In order for the text to apear on different lines, you can use \n which is a character that insert a new line. You can find more info here about the escape sequence.

Your function could look like this:

function copyPaste(){
    // trim() is used here to remove the whitespace at the end of the word when you dblClick on a word
    const selection = window.getSelection().toString().trim();
    const textarea2 = document.getElementById("pasteTextarea");
    if(!textarea2.value) {
        // Don't add a new line when the textarea is empty
     textarea2.value = selection;
    }
  else {
     textarea2.value += `\n${selection}`;    
    }
}

<textarea name="" id="text" cols="30" rows="10" ondblclick="copyPaste()" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur minus iure suscipit quam expedita? Sed minus laboriosam natus quaerat autem enim accusantium, architecto officiis aliquam pariatur. Adipisci provident tenetur velit!</textarea>

<textarea name="" id="pasteTextarea" cols="30" rows="10"></textarea>

How can I insert some text into a textarea using JavaScript or jQuery?

2 Answers2