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，它不固定可能会有更多的文本框出现。）。

如何在当前的小车位置插入文字。请帮帮我们!!

Answer 1

检测单击插入符号位置，然后在同一位置插入一些文本的示例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) );
});

Answer 2

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

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

<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。单击按钮时此代码不执行任何操作，并且在此之前没有任何input元素被关注。您可能希望发出错误消息。或者您可能想要设置最初关注的元素之一。

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

2 个答案: