使用 Javascript 移动光标位置

Move the cursor position with Javascript?

本文关键字：位置 光标 移动 Javascript 使用      更新时间：2023-09-26

我希望将插入符号在其当前位置之前正好移动四个空格，以便我可以正确插入制表符。我已经在插入符号的位置使用了 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();
    }
}

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

编辑：根据o.v.提供的链接，我设法拼凑了一些东西，终于在做一些事情：抛出错误。耶！下面是新代码：

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

现在，这给出了错误Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 .知道为什么吗？

您拥有的代码片段用于文本输入和文本区域，而不是contenteditable元素。

如果您的所有内容都位于单个文本节点中，并且所选内容完全包含在其中，则以下内容适用于所有主流浏览器，包括 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();
        }
    }
}
相关文章：