javascript 将光标设置到 textarea 中特定行的特定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17858174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set cursor to specific position on specific line in a textarea
提问by Wesley Smith
I am trying to somewhat duplicate the "autocorrect" functionality seen in programs like Microsoft Office's Outlook.
我试图在某种程度上复制 Microsoft Office 的 Outlook 等程序中看到的“自动更正”功能。
For starters, anytime a user types "a " (the letter a and a space) at the beginning of a line I want to change that text to "*Agent ["
首先，只要用户在一行的开头输入“a”（字母 a 和一个空格），我就想将该文本更改为“*Agent [”
I have written the below which works fine if you are typing along in the textarea from top to bottom. But if you type anywhere else in the textarea the text is changed then the cursor moves to the end of the textarea.
如果您在 textarea 中从上到下输入，我写了下面的内容。但是，如果您在 textarea 中的任何其他位置键入文本，则会更改文本，然后光标移动到 textarea 的末尾。
I want the cursor to always be placed at the end of the changed text.
我希望光标始终位于更改文本的末尾。
I have the line number that was changed in the variable currentLineNumberand i know the cursor needs to be after the 8th character in that line but I am unsure of how to tell it to go there
我有在变量中更改的行号，currentLineNumber我知道光标需要在该行的第 8 个字符之后，但我不确定如何告诉它去那里
Ideally id like to something like
理想情况下，我喜欢类似的东西
function setCursor(row, position) {
//.... code to set cursor
}
What can I do to accomplish this? Im open to a javascript or jQuery solution (although I find jQuery a little difficult to read and understand)
我能做些什么来实现这一目标？我对 javascript 或 jQuery 解决方案持开放态度（尽管我发现 jQuery 有点难以阅读和理解）
If there's a better way to achieve what I need overall, I'm open to that too.
如果有更好的方法来实现我的整体需求，我也愿意。
Here's a jsFiddleif you don't understand the issue
如果你不理解这个问题，这里有一个jsFiddle
回答by Leon
I've updated your fiddle see: http://jsfiddle.net/eghpf/2/
我已经更新了你的小提琴，见：http: //jsfiddle.net/eghpf/2/
I've added var currentPositionwhich is used in this method
我添加currentPosition了这个方法中使用的var
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();
}
}
Which comes from this jQuery Set Cursor Position in Text Area
来自这个jQuery Set Cursor Position in Text Area
What happens (is the reason why the cursor is always on the last position); is when you call $('#systemNotesbuilder').val(arrayOfLines.join("\n"));the entire value gets overwritten with a new value placing the cursor after that new value. The call to set the cursor is (and should) be after that call.
发生了什么（是光标总是在最后一个位置的原因）；是当你调用$('#systemNotesbuilder').val(arrayOfLines.join("\n"));整个值被一个新值覆盖时，将光标放在该新值之后。设置光标的调用是（并且应该）在该调用之后。
