Javascript 用Javascript移动光标位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10778291/
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
Move the cursor position with Javascript?
提问by Elliot Bonneville
I'm looking to move the caret exactly four spaces ahead of its current position so that I can insert a tab properly. I've already got the HTML insertion at the caret's position working, but when I insert the HTML, the caret is left behind. I've spent the past hour or so looking at various ways to do this and I've tried plenty of them, but I can't get any of them to work for me. Here's the most recent method I've tried:
我希望将插入符号移动到当前位置前四个空格，以便我可以正确插入一个制表符。我已经在插入符号的位置插入了 HTML，但是当我插入 HTML 时，插入符号被留下了。我花了一个小时左右的时间寻找各种方法来做到这一点，我已经尝试了很多方法，但我无法让它们中的任何一个为我工作。这是我尝试过的最新方法：
function moveCaret(input, distance) {
if(input.setSelectionRange) {
input.focus();
input.setSelectionRange(distance, distance);
} else if(input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd(distance);
range.moveStart(distance);
range.select();
}
}
It does absolutely nothing--doesn't move the caret, throw any errors or anything. This leaves me baffled. And yes, I know that the above method set (is supposed to) set the caret at a certain position from the beginning of the specified node (that is, input), but even that's not working. So, what exactly am I doing wrong, and how can I do it right?
它绝对什么都不做——不移动插入符号，不抛出任何错误或任何东西。这让我很困惑。是的，我知道上述方法设置（应该）在指定节点（即input）开头的某个位置设置插入符号，但即使这样也行不通。那么，我到底做错了什么，我该如何做对呢？
Edit: Based on the links that o.v. provided, I've managed to cobble something together that's finally doing something: throwing an error. Yay! Here's the new code:
编辑：根据 ov 提供的链接，我设法将一些东西拼凑在一起，最终做了一些事情：抛出错误。好极了！这是新代码：
this.moveCaret = function(distance) {
if(that.win.getSelection) {
var range = that.win.getSelection().getRangeAt(0);
range.setStart(range.startOffset + distance);
} else if (that.win.document.selection) {
var range = that.win.document.selection.createRange();
range.setStart(range.startOffset + distance);
}
}
Now, this gives the error Uncaught Error: NOT_FOUND_ERR: DOM Exception 8. Any ideas why?
现在，这给出了错误Uncaught Error: NOT_FOUND_ERR: DOM Exception 8。任何想法为什么？
回答by Tim Down
The code snippet you have is for text inputs and textareas, not contenteditableelements.
您拥有的代码片段用于文本输入和文本区域，而不是contenteditable元素。
Provided that all your content is in a single text node and the selection is completely contained within it, the following will work in all major browsers, including IE 6.
如果您的所有内容都在一个文本节点中并且选择完全包含在其中，则以下内容将适用于所有主要浏览器，包括 IE 6。
Demo: http://jsfiddle.net/9sdrZ/
演示：http: //jsfiddle.net/9sdrZ/
Code:
代码：
function moveCaret(win, charCount) {
var sel, range;
if (win.getSelection) {
// IE9+ and other browsers
sel = win.getSelection();
if (sel.rangeCount > 0) {
var textNode = sel.focusNode;
var newOffset = sel.focusOffset + charCount;
sel.collapse(textNode, Math.min(textNode.length, newOffset));
}
} else if ( (sel = win.document.selection) ) {
// IE <= 8
if (sel.type != "Control") {
range = sel.createRange();
range.move("character", charCount);
range.select();
}
}
}
