在当前 carlet 位置插入文本不起作用（多个文本框）

Question

我有两个文本框和一个按钮如下：

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

我正在尝试在当前carlet位置的文本框中插入一些文本，我所做的如下：

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

//按钮点击：

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

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


});

这里我手动定义文本框 id，正如您在我的代码中看到的那样：

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

我需要以这样一种方式插入值，即我的 carlet 位置现在应该插入到该文本框中的哪个框中。我的意思是该值应该插入当前的carlet位置（test1或test2，它不固定可能会出现更多的文本框。）。

如何在当前 carlet 位置插入文本。请大家帮帮我！！

Answer 1

有几种方法可以找出哪个元素有焦点，最简单的$(document.activeElement)在使用jQuery时，请参阅How to select an element that has focus on it with jQuery和其他关于该主题的SO问题。

但是，单击按钮会聚焦在按钮元素上，而丢失之前聚焦元素的信息。为了解决这个问题，将blur 事件处理程序添加到input 元素，以便在模糊时，即失去焦点时，指向该元素的指针存储在变量中。然后，当您希望插入文本时，您只需使用该变量。以下代码以一种简单的方式执行此操作，将insertAtCaret 声明为一个函数（将要使用的元素作为一个参数传递）并使用一个全局变量；您可能希望修改方法以满足您的编码理念或标准。此代码假定相关的input 元素具有以test 开头的id 属性值，并且没有其他元素具有此类属性。

<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>

附：当单击按钮并且在此之前没有关注任何 input 元素时，此代码不执行任何操作。您可能希望改为发出错误消息。或者您可能想要设置最初关注的那些元素之一。

Answer 2

一个示例here 在单击插入符号位置时检测，然后在同一位置插入一些文本。我正在将插入符号位置记录到控制台，因此应该为您提供插件基础的参考。

来自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) );
});