javascript - 当用户单击按钮(在光标位置)时，将一串文本添加到输入字段中

Question

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

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 fiddle ，到目前为止一切正常:

https://jsfiddle.net/2m8L3y3n/

我基本上希望插入的文本不仅在底部，而且在光标恰好位于文本区域框中的任何位置...

此外，如果我在一个页面上有多个文本框，如何让按钮绑定(bind)到特定的文本框？在我的 JS fiddle 上，我有 2 个盒子，但只有第一个盒子有效 - 有没有办法做到这一点，这样我就不必为每个盒子都有一个新的 javascript 代码？我可能在一个页面上有大约 10 个文本框，每个框都有自己的一组按钮，所以我试图使代码易于管理。

非常感谢任何帮助!

Answer 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。这意味着没有选择将文本附加到文本框的最前面。