[英]Move the cursor position with Javascript?
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.
我已经可以在插入符号的位置插入HTML了,但是当我插入HTML时,插入符号被遗忘了。 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:
这是我尝试过的最新方法:
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. 是的,我知道上述方法集(应该)将插入号设置为从指定节点(即
input
)开始的某个位置,但即使这样也无法正常工作。 So, what exactly am I doing wrong, and how can I do it right? 那么,我到底在做错什么,我该怎么做对呢?
Edit: Based on the links that ov provided, I've managed to cobble something together that's finally doing something: throwing an error. 编辑:根据ov提供的链接,我设法将一些东西拼凑在一起,最终完成了一些事情:抛出错误。 Yay!
好极了! Here's the new code:
这是新的代码:
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
. 现在,这给出了错误
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
。 Any ideas why? 有什么想法吗?
The code snippet you have is for text inputs and textareas, not contenteditable
elements. 你的代码片段是文字输入和文字区域,不
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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.