将光标设置到文本区域中特定行上的特定位置

Posted 2023-03-06

【中文标题】将光标设置到文本区域中特定行上的特定位置

【英文标题】：Set cursor to specific position on specific line in a textarea

【发布时间】：2013-07-25 08:31:35

【问题描述】：

我试图在某种程度上复制 Microsoft Office 的 Outlook 等程序中的“自动更正”功能。

对于初学者，只要用户在行首键入“a”（字母 a 和空格），我就想将该文本更改为“*Agent [”

如果您在文本区域中从上到下输入，我已经编写了以下内容，它可以正常工作。 但如果您在文本区域的任何其他位置键入文本，则会更改文本，然后光标会移动到文本区域的末尾。

我希望光标始终位于更改文本的末尾。

我有在变量currentLineNumber 中更改的行号，我知道光标需要在该行的第 8 个字符之后，但我不确定如何告诉它去那里

理想情况下，我喜欢

function setCursor(row, position) 
 //.... code to set cursor 

我该怎么做才能做到这一点？我对 javascript 或 jQuery 解决方案持开放态度（尽管我发现 jQuery 有点难以阅读和理解）

如果有更好的方法来实现我的整体需求，我也愿意接受。

如果你不明白这个问题，这里是jsFiddle

【问题讨论】：

Set cursor position in html textbox的可能重复

【参考方案1】：

我已经更新了你的小提琴见：http://jsfiddle.net/eghpf/2/

我添加了这个方法中使用的 var currentPosition

function setSelectionRange(input, selectionStart, selectionEnd) 
  if (input.setSelectionRange) 
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  
  else if (input.createTextRange) 
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  

来自这个jQuery Set Cursor Position in Text Area

发生了什么（就是光标总是在最后一个位置的原因）；是当您调用$('#systemNotesbuilder').val(arrayOfLines.join("\n")); 时，整个值将被一个新值覆盖，将光标放在该新值之后。设置光标的调用是（并且应该）在该调用之后。

【讨论】：

非常感谢。这比我预期的要痛苦得多，我可以理解这是如何工作的。完美！