如何在我最后插入文本的文本区域中设置光标位置?

萨钦

在A中,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”之后保留。

皮德拉姆

只需使用它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" />

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在文本区域中设置文本光标位置

jQuery在文本区域中设置光标位置

如何滚动到文本区域中的光标位置?

如何获得文本区域中的光标位置?

使用React在文本区域中更改光标位置

自动提交后如何将光标保持在文本区域中的位置?

在输入文本区域中设置插入符号的样式

如何在文本区域中显示所选选项的文本

如何使用光标位置作为最后一行分割文本区域的值

在文本区域中设置为只读

如何在文本区域中设置特定单词的样式

设置值后如何在HTML文本区域中使撤消工作?

如何在文本区域中更改字体颜色

空/有文本时,插入符在文本区域中的位置不同

在 HTML 输入/文本区域中的指定位置插入文本

如何将文本插入具有ID的多个文本区域中的一个文本区域?

文本区域(JTextArea)的自动文本滚动,插入符号位置设置为最后一行的开头

如何从头开始以字符为单位,在文本区域中插入符号列(不是像素)的位置?

它只是插入文本区域中的最后一个值

当用户在长文本中间插入换行符时,如何防止Chrome的文本区域中的光标跳到顶部?

在文本区域中获取和设置文本选择

在文本区域中将文本设置为粗体

在文本区域中按下键时如何防止正常的光标行为

如何使用jQuery在按下按钮的文本区域中上,下,左,右移动光标?

如何替换反应/文本区域中的“选定文本”=>“装饰文本”?我无法获得“所选文本”的确切位置(索引)

获取文本区域中插入符号的偏移位置(以像素为单位)

在文本区域中的当前位置之后插入新行

如何使用html输入标签设置文本区域中文本的颜色

如何排列在下方的文本区域中的文本?