用Javascript移动光标位置？ [英] Move the cursor position with Javascript?

问题描述

我希望将插入符号移动到其当前位置前面四个空格处，以便我可以正确插入一个标签。我已经在插入符号的位置处进行了HTML插入，但是当我插入HTML时，插入符号就被遗忘了。我花了大约一个小时左右的时间看各种方法来做这件事，我已经尝试了很多，但我不能让他们中的任何一个为我工作。这是我尝试过的最新方法：

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:

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();
    }
}

它绝对没有 - 没有移动插入，抛出任何错误或任何东西。这让我感到困惑。是的，我知道上面的方法集（应该）将插入符号设置在指定节点开头的某个位置（即 input ），但是即使那不起作用。那么，我到底做错了什么，我该怎么做呢？

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?

编辑：根据链接OV提供，我已经设法凑合了一些东西，最终做了一些事情：抛出一个错误。好极了！这是新代码：

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:

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);
    }
}

现在，这会产生错误未捕获错误：NOT_FOUND_ERR：DOM异常8 。任何想法为什么？

Now, this gives the error Uncaught Error: NOT_FOUND_ERR: DOM Exception 8. Any ideas why?

推荐答案

您拥有的代码片段用于文本输入和textareas，而不是 contenteditable elements。

The code snippet you have is for text inputs and textareas, not contenteditable elements.

如果您的所有内容都在一个文本节点中并且选择完全包含在其中，则以下内容适用于所有主要内容浏览器，包括IE 6。

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.

演示： http：// jsfiddle .net / 9sdrZ /

代码：

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();
        }
    }
}

这篇关于用Javascript移动光标位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！