When I click a button I want to insert some text into the currently selected textarea at the current caret position. How do I do this with jQuery or just Javascript?
I've come a across code that inserts text into a specific text area but for my project there are multiple textareas.
This does all what you want (except old browser support).
var myText = "sup?", lastActiveElement = null; window.addEventListener("focusin", function(e) { lastActiveElement = e.target; }); document.getElementById("go").addEventListener("click", function(e) { if(!lastActiveElement || lastActiveElement.tagName.toUpperCase() !== "TEXTAREA") { alert("no textarea selected"); return; } var selectionStart = lastActiveElement.selectionStart, value = lastActiveElement.value; lastActiveElement.value = value.substr(0, selectionStart) + myText + value.substr(selectionStart); }); Demo: http://jsfiddle.net/rfYZq/2/
The focusin event stores the last focused element into a var.
(function ($, undefined) { $.fn.getCursorPosition = function() { var el = $(this).get(0); var pos = 0; if('selectionStart' in el) { pos = el.selectionStart; } else if('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } return pos; } })(jQuery); Basically, to use it on a text box, do the following:
$("#myTextBoxSelector").getCursorPosition(); I got this script from somewhere else but I can't find the bookmark for it.
This adds a method to jQuery that will allow you to do the following:
$("#selectedTextarea").insertAtCaret(myText); Edit: a working fiddle here
And the code:
jQuery.fn.extend({ insertAtCaret: function(myValue) { return this.each(function() { 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(); } }) } }); 
