在当前卡雷位置插入文本不起作用(多个文本框）

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

本文关键字：插入文本 不起作用 文本 位置 雷位置      更新时间：2023-09-26

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

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

如何在当前卡雷位置插入文本。请帮帮我！！

有几种方法可以找出哪个元素具有焦点，最简单的$(document.activeElement)使用 jQuery 时，请参阅如何使用 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元素。您可能希望改为发出错误消息。或者，您可能希望设置最初关注的元素之一。

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

这个原始问题的例子

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) );
});
相关文章：