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

Question

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

对于初学者，每当用户在行首键入“a”(字母 a 和空格)时，我想将该文本更改为“*Agent [”

我写了下面的内容，如果您在文本区域中从上到下打字，效果很好。 但如果您在文本区域的其他任何地方键入文本，则文本会更改，然后光标会移动到文本区域的末尾。

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

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

理想情况下我喜欢这样的东西

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

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

如果有更好的方法来实现我的总体需求，我也乐于接受。

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

Answer 1

我已经更新了您的 fiddle ，请参阅: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")); 时，整个值会被新值覆盖，将光标放在新值之后。设置光标的调用是(并且应该)在该调用之后。