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>
It's not 100% mine, I googled it somewhere and then tuned for mine app.
Usage: $('#element').insertAtCaret('text');