Question

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

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

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

这是我的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个文本区域框，每个框都有自己的按钮组，所以我试图保持代码的可管理性。

完全赞赏任何帮助！

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以试试这个.----------------

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果有什么不清楚，请告诉我。

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

4 个答案:

你可以试试这个.----------------