当用户单击按钮时，将文本字符串添加到输入字段中（在光标位置）

Posted 2023-05-07

【中文标题】当用户单击按钮时，将文本字符串添加到输入字段中（在光标位置）

【英文标题】：Add a string of text into an input field when user clicks a button (At Cursor Location)

【发布时间】：2016-08-29 08:16:09

【问题描述】：

我在这里找到了我需要的大部分解决方案：

Add a string of text into an input field when user clicks a button

问题是我需要将文本添加到光标位置的文本区域框中 - 此页面上的解决方案将文本字符串添加到文本区域框内容的末尾。

这是我的 HTML：

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>

这是我的 Javascript：

$(function () 
$('#button').on('click', function () 
    var text = $('#text');
    text.val(text.val() + "\n\nafter clicking");    
);
$('#button2').on('click', function () 
    var text = $('#text');
    text.val(text.val() + "\n\nafter clicking 2");    
);  );

到目前为止，这是我的 JS 小提琴：

https://jsfiddle.net/2m8L3y3n/

我基本上希望插入的文本不只是在底部，而是光标碰巧在 textarea 框中的任何地方...

另外，如果我在一个页面上有多个 textarea 框，我如何让按钮绑定到特定的 textarea 框？在我的 JS 小提琴上，我有 2 个盒子，但只有第一个可以工作 - 有没有办法做到这一点，这样我就不必为每个盒子都有一个新的 javascript 代码？我可能在一个页面上有 10 个文本区域框，每个都有自己的一组按钮，所以我试图让代码易于管理。

非常感谢任何帮助！

【参考方案1】：

我已经编写了一个示例函数来说明如何实现这一点。

https://jsfiddle.net/axcufrd0/2/

function insertText(text)

    var $textbox = $("#text");
    var textStr  = $textbox.text();
    var startPos = $textbox[0].selectionStart;
    var endPos   = $textbox[0].selectionEnd;

    // If set to true, the selection will NOT be replaced.
    // Instead, the text will be inserted before the first highlighted character.
    if (false)
    
        endPost = startPos;
    

    var beforeStr = textStr.substr(0, startPos);
    var afterStr  = textStr.substr(endPos, textStr.length);

    textStr = beforeStr + text + afterStr;
    $textbox.text(textStr);
    return textStr;

有了这个，我们想要拆分文本，然后将它与新内容连接起来。根据您执行此操作的方式，您可能想要替换选择文本或直接在之前或之后追加。

我没有花时间解决此代码的一个警告是，默认情况下，选择文本是 0 到 0。这意味着没有选择会将文本附加到文本框的最前面。

【讨论】：

谢谢！就光标位置而言，这就像一个魅力 - 关于如何将其应用于同一页面上的多个文本框，所有这些文本框都有自己的一组按钮？

是的。查看有关使用变量绑定事件的 jQuery 文档。您可以非常轻松地使用简单的绑定来回收一个函数。 api.jquery.com/on

【参考方案2】：

您需要获取光标位置（索引）并使用 substring 拆分 textarea 文本并将字符串连接在一起以获得新文本：

有关获取光标位置的详细信息，请参阅this answer。

$(function () 
  $.fn.getCursorPosition = function() 
    var el = $(this).get(0);
    var pos = 0;
    if('selectionStart' in el) 
      pos = el.selectionStart;
     else if('selection' in document) 
      el.focus();
      var Sel = document.selection.createRange();
      var SelLength = document.selection.createRange().text.length;
      Sel.moveStart('character', -el.value.length);
      pos = Sel.text.length - SelLength;
    
    return pos;
  ;

  $('#button').on('click', function () 
    var text = $('#text');
    var cursorLocation = text.getCursorPosition();
    var originalText = text.val();
    var newText = originalText.substring(0, cursorLocation) + 'after clicking' + originalText.substring(cursorLocation);
    text.val(newText);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>
<button id="button">Click Me</button>

【参考方案3】：

你可以试试这个。----------------

function insertAtCaret(areaId, text) 
        var txtarea = document.getElementById(areaId);
        var scrollPos = txtarea.scrollTop;
        var strPos = 0;
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
                "ff" : (document.selection ? "ie" : false));
        if (br == "ie") 
            txtarea.focus();
            var range = document.selection.createRange();
            range.moveStart('character', -txtarea.value.length);
            strPos = range.text.length;
        
        else if (br == "ff")
            strPos = txtarea.selectionStart;

        var front = (txtarea.value).substring(0, strPos);
        var back = (txtarea.value).substring(strPos, txtarea.value.length);
        txtarea.value = front + text + back;
        strPos = strPos + text.length;
        if (br == "ie") 
            txtarea.focus();
            var range = document.selection.createRange();
            range.moveStart('character', -txtarea.value.length);
            range.moveStart('character', strPos);
            range.moveEnd('character', 0);
            range.select();
        
        else if (br == "ff") 
            txtarea.selectionStart = strPos;
            txtarea.selectionEnd = strPos;
            txtarea.focus();
        
        txtarea.scrollTop = scrollPos;
    

<textarea style="width:500px; height: 150px;" id="text"></textarea>
    <br />
    <input type="button" onclick="insertAtCaret('text', ' text to insert')" value="Click Me to add Text" id="button" />
    <input type="button" onclick="insertAtCaret('text', ' Hello Man')" value="Click Me to add Text" id="button" />

【参考方案4】：

References

代码：获取光标当前位置的函数

function getCaret(el) 
  if (el.selectionStart) 
    return el.selectionStart;
   else if (document.selection) 
    el.focus();
    var r = document.selection.createRange();
    if (r == null) 
      return 0;
    
    var re = el.createTextRange(),
      rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);
    return rc.text.length;
  
  return 0;

点击按钮 2：

$('#button2').on('click', function() 
  var text = document.getElementById('text');
  var position = getCaret(text);
  console.log(position);
  console.log(text);
  //text.val(text.val() + "\n\nafter clicking 2");
  var currentPos = getCaret(text);
  //alert(currentPos);
  var strLeft = text.value.substring(0, currentPos);
  var strMiddle = "String to add";
  var strRight = text.value.substring(currentPos, text.value.length);
  text.value = strLeft + strMiddle + strRight;
);

如果有什么不清楚的地方请告诉我。