Insert text into textarea with jQuery Insert text into textarea with jQuery jquery jquery

Insert text into textarea with jQuery


I like the jQuery function extension. However, the this refers to the jQuery object not the DOM object. So I've modified it a little to make it even better (can update in multiple textboxes / textareas at once).

jQuery.fn.extend({insertAtCaret: function(myValue){  return this.each(function(i) {    if (document.selection) {      //For browsers like Internet Explorer      this.focus();      var 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();    }  });}});

This works really well. You can insert into multiple places at once, like:

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');


From what you have in Jason's comments try:

$('a').click(function() //this will apply to all anchor tags{    $('#area').val('foobar'); //this puts the textarea for the id labeled 'area'})

Edit- To append to text look at below

$('a').click(function() //this will apply to all anchor tags{    $('#area').val($('#area').val()+'foobar'); })


I use this function in my code:

$.fn.extend({  insertAtCaret: function(myValue) {    this.each(function() {      if (document.selection) {        this.focus();        var sel = document.selection.createRange();        sel.text = myValue;        this.focus();      } else if (this.selectionStart || this.selectionStart == '0') {        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();      }    });    return this;  }});
input{width:100px}label{display:block;margin:10px 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Copy text from: <input id="in2copy" type="text" value="x"></label><label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label><button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>