Insert text on current carlet position not working (Multiple text boxes)

Question

I have two text boxes and a button as follows :

<input type="text" id="test1">
<input type="text" id="test2">
<input type="button" value="Click me" id="btn">

I am trying to insert some text into the textbox on the current carlet position, What I was done is as follows:

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

//Button click:

$("#btn").click(function()
{

 $('#test1').insertAtCaret("Some text");


});

Here I am manually defining the text box id as you can see in my code:

 $('#test1').insertAtCaret("Some text");

I need to insert the value in such a way that in which of the box my carlet position now it should insert into that text box. I mean the value should insert on current carlet postion(test1 or test2, It is not fixed may be more text boxes may come.).

How can insert text on current carlet position. Please help me guys!!

Your code refers to a specific element, with `$('#test1')`. It shows no attempt at doing what you describe. — Jukka K. Korpela, Dec 14 '14 at 09:40
@JukkaK.Korpela yah, I need to append text into a caret position which I can not provide Id predetermined!! — user1365067, Dec 14 '14 at 09:57

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

An example here of detecting on click the caret postion, and then inserting some text in the same place. I am logging to the console the caret position, so that should give you a reference to base your plugin on.

Example from this original question

jQuery("#btn").on('click', function() {
    var caretPos = document.getElementById("txt").selectionStart;
    var textAreaTxt = jQuery("#txt").val();
    var txtToAdd = "more text";
    console.log(caretPos)
    jQuery("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
});

edited May 23 '17 at 11:50

Community

1
1

answered Dec 14 '14 at 09:54

svnm

22,878
21
90
105

in here you are hard coding the id as txt, In my case also I am doing the same, I need to get the caret position which We can not know before. It may reside in any of the textbox, so you can not supply id. It should work in dynamic way, hope you understand buddy!! – user1365067 Dec 14 '14 at 10:02

score 0 · Accepted Answer · edited May 23 '17 at 11:50

There are several ways to find out which element has focus, at the simplest $(document.activeElement) when using jQuery, see How to select an element that has focus on it with jQuery and other SO questions on the topic.

However, clicking on a button focuses on the button element, losing information on what was the focused element before that. To cope with this, add blur event handlers to the input element so that on blur, i.e. on losing focus, a pointer to the the element is stored in a variable. Then you just use that variable when you wish to insert text. The following code does this in a simple manner, declaring insertAtCaret just as a function (with the element to be used passed as one argument) and using a global variable; you may wish to modify the approach to meet your coding philosophy or standards. This code assumes that the relevant input elements have id attribute values that start with test and that no other elements have such attributes.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="test1">
    <input type="text" id="test2">
    <input type="button" value="Click me" id="btn">
    <script>
    function insertAtCaret(elem, myValue) {
        if (document.selection) {
          //For browsers like Internet Explorer
          elem.focus();
          var sel = document.selection.createRange();
          sel.text = myValue;
          elem.focus();
        }
        else if (elem.selectionStart || elem.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = elem.selectionStart;
          var endPos = elem.selectionEnd;
          var scrollTop = elem.scrollTop;
          elem.value = elem.value.substring(0, startPos)+myValue+elem.value.substring(endPos,elem.value.length);
          elem.focus();
          elem.selectionStart = startPos + myValue.length;
          elem.selectionEnd = startPos + myValue.length;
          elem.scrollTop = scrollTop;
        } else {
          elem.value += myValue;
          elem.focus();
        }
    }
    //Button click:
    var wasFocused;
    $("[id^=test]").blur(function()
    {
      wasFocused = this;
    });
    $("#btn").click(function()
    {
      if(wasFocused) {
        insertAtCaret(wasFocused, "Some text");
      }
    });
    </script>

P.S. This code does nothing when the button is clicked and none of the input elements was focused on before that. You might wish to issue an error message instead. Or you might want to set one of those elements initially focused on.

Insert text on current carlet position not working (Multiple text boxes)

2 Answers2