How to add text to textarea when user clicks a button

Question

I want to add text to textarea when user clicks a button.I know how to concate string and add it to textarea but what i want is to add text to the place/position inside textarea where users clicks and then add text in that position on clicking button.

Thanks in advance

as mentioned above i did concating string on button click with already existing text inside textarea. — user2360906, Jul 23 '13 at 17:28
i need to add text to the user clicked position inside textarea — user2360906, Jul 23 '13 at 17:29
I think this is what you're trying to get at: http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery — compid, Jul 23 '13 at 17:37

score 4 · Answer 1 · answered Jul 25 '13 at 03:51

Here's a reference from me:

<script>
function input(){
    var text = "here the text that you want to input.";
    document.forms.form1.area.value = text;
}    
</script>
<form name='form1'>
    Click<input onclick='input()' type='button' value='BUTTON' id='button'><br>
    <textarea name='area'></textarea>

</form>

that an example that showing when a button clicked, a row of text added to textarea. why do i added javascript in it? because html attributes only is not enough to make it.
may it help :D

If you want to append the new text, just put the current text at the textarea into a variable and then mix it with your new text — Oki Erie Rinaldi, Jul 21 '14 at 02:57

score 4 · Answer 2 · answered Apr 04 '18 at 19:17

You need to add text at specific position (at caret position) into the text area when you click on a button. Try the following:

var position;
 
    function getCaretPosition() {
        var ctlTextArea = document.getElementById('textArea');
        position = ctlTextArea.selectionStart;
        return position;
    }
 
 /* Needs JQuery */
    $(document).ready(function () {

        jQuery.fn.extend({
            insertAtCaret: function (myValue) {
                return this.each(function (i) {
                    if (document.selection) {
                        //For browsers like Internet Explorer
                        this.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                        this.focus();
                    }
                    else if (this.selectionStart || this.selectionStart == '0') {
                        //For browsers like Firefox and Webkit based
                        var startPos = this.selectionStart;
                        var endPos = this.selectionEnd;
                        var scrollTop = this.scrollTop;
                        this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                        this.focus();
                        this.selectionStart = startPos + myValue.length;
                        this.selectionEnd = startPos + myValue.length;
                        this.scrollTop = scrollTop;
                    } else {
                        this.value += myValue;
                        this.focus();
                    }
                })
            }
        });

        $('#btnTest').click(function () {
            $("#textArea").insertAtCaret(' << inserted text! >> ');
        });

    });

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>How to add text to textarea when user clicks a button</title>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
// The javascript code goes here...
</script>

<body>
  
<h1>How to add text to textarea when user clicks a button</h1>
<div id="divDroppedFields">
    <textarea id="textArea" name="txtMessageFields" class="required" cols="80" rows="10" onclick="getCaretPosition()" onkeyup="getCaretPosition()">
 In the meantime the cat slowly recovered. The socket of the lost eye presented, it is true, a frightful appearance, but he no longer appeared to suffer any pain.
 </textarea>
</div>
<button id="btnTest">CLICK ME</button>


</body>
</html>

score -1 · Answer 3 · answered Jul 25 '13 at 04:15

-1

here is a simple way using JQuery.

your html

<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />

Your Jquery

$(document).ready(function(){
  $("#add").click(function(){
      $('#txtarea').html('test');
  });
});

you can see it in action here

answered Jul 25 '13 at 04:15

srakl

2,565
2
21
32

What if you want to add 2 paragraphs? how would you pass HTML into it? – Yaco Zaragoza May 04 '18 at 21:24
1

@YacoZaragoza try `$('#txtarea, #txtarea2').html('test');` – srakl May 19 '18 at 12:15
This does not add text instead it replaces the existing text with the new text. – Albert Alberto Jan 28 '21 at 10:47

How to add text to textarea when user clicks a button

3 Answers3

Linked