How to use JQuery InsertAtCaret Function

javascript, jquery

Solution

Here is modified version of above plugin:

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();
    }
  })
}
});

Basically, this plugin allows you to insert a piece of text at caret of multiple `textbox` or `textarea` . You can use it like this:

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

Working Demo

Problem

I have found JQuery InsertAtCaret Function Here But there is no detail given how to use it. I have tried a lot to understand that how it can be used, but could not find any way. Here is the function. ``` $.fn.insertAtCaret = function(myValue) { return this.each(function() { var me = this; if (document.selection) { // IE me.focus(); sel = document.selection.createRange(); sel.text = myValue; me.focus(); } else if (me.selectionStart || me.selectionStart == '0') { // Real browsers var startPos = me.selectionStart, endPos = me.selectionEnd, scrollTop = me.scrollTop; me.value = me.value.substring(0, startPos) + myValue + me.value.substring(endPos, me.value.length); me.focus(); me.selectionStart = startPos + myValue.length; me.selectionEnd = startPos + myValue.length; me.scrollTop = scrollTop; } else { me.value += myValue; me.focus(); } }); }; ``` I have a textbox input field and a textarea below it. Where Should I call this function and what value should I give it. And Where I have to give the reference of my textarea.

Original source