如何在我上次插入文本的文本区域中设置光标位置？答案

【问题标题】：How to set cursor position in a textarea where I last inserted the text?如何在我上次插入文本的文本区域中设置光标位置？
【发布时间】：2020-02-11 13:39:02
【问题描述】：

在textarea 中，我做了两个操作——一个是找到当前光标位置，第二个是在光标当前所在的位置插入一些文本。请注意，这不是鼠标 X/Y 坐标的情况。实际上我使用的是字符索引号。除了一个问题外，一切似乎都运行良好。当我在当前光标位置插入一些文本时，插入文本后光标会转到字符串的末尾。我想避免这种情况。而不是这个，我想将光标保持在插入文本的末尾。

这是我的代码：

$(document).ready(function() {
  // Get current cursor position
  $("#btngetcurpos").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    alert(cursor_pos);
    $("#my_textarea").focus();
  });

  // Insert text at current cursor position
  $("#btnsettxt").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    var textarea_txt = $("#my_textarea").val();
    var txt_to_add = "test";
    $("#my_textarea").val(textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos));
    $("#my_textarea").focus();
  });
});

#my_textarea {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<textarea id="my_textarea" autofocus>This is a textarea.</textarea>

<br /><br />

<input type="button" id="btngetcurpos" value="Get Cursor Position" />

<input type="button" id="btnsettxt" value="Insert Text" />

例如，如果我当前的光标位于字符串“This is a textarea”的开头。然后插入文本“test”，然后虽然文本插入到开头，但光标会移到整个字符串的末尾。相反，它应该停留在文本“test”之后。

【问题讨论】：

其实这只有当你想在old文本之前添加new文本时发生！
@Pedram 是的。

标签： javascript jquery html

【解决方案1】：

只需使用此 selectionEnd 并与 txt_to_add 长度相加

$(document).ready(function() {

  // Get current cursor position
  $("#btngetcurpos").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    alert(cursor_pos);
    $("#my_textarea").focus();
  });

  // Insert text at current cursor position
  $("#btnsettxt").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    var textarea_txt = $("#my_textarea").val();
    var txt_to_add = "test";
    $("#my_textarea").val(textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos));
    $("#my_textarea").focus();
    $('#my_textarea').prop('selectionEnd', cursor_pos + txt_to_add.length);

  });
});

#my_textarea {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<textarea id="my_textarea" autofocus>This is a textarea.</textarea>

<br /><br />

<input type="button" id="btngetcurpos" value="Get Cursor Position" />

<input type="button" id="btnsettxt" value="Insert Text" />

【讨论】：

【解决方案2】：

插入并聚焦文本区域后，您需要重新定位光标。

在 "$("#my_textarea").focus();" 之后尝试这样的操作线

$("#my_textarea").prop('selectionEnd',cursor_pos + txt_to_add.length);

【讨论】：