$.fn.EnableInsertAtCaret = function() { $(this).on("focus", function() { $(".insertatcaretactive").removeClass("insertatcaretactive"); $(this).addClass("insertatcaretactive"); }); }; function InsertAtCaret(myValue) { return $(".insertatcaretactive").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(); } }) } $(".inputHolder,#txtInput").EnableInsertAtCaret(); $('#test').click(function() { InsertAtCaret('test'); });
<textarea class="inputHolder" cols="30" rows="10"></textarea> <textarea class="inputHolder" cols="30" rows="10"></textarea> <input type="text" id="txtInput" /> <br/> <br/> <button id="test">Insert "Test" at Cursor position</button>
.insertatcaretactive { border:1px soild #1e90ff; }