用Javascript移动光标位置?

Posted

技术标签:

【中文标题】用Javascript移动光标位置?【英文标题】:Move the cursor position with Javascript? 【发布时间】:2012-06-02 10:41:32 【问题描述】:

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

它什么都不做——不移动插入符号,不抛出任何错误或任何东西。这让我很困惑。是的,我知道上面的方法 set (应该)将插入符号设置在指定节点开头的某个位置(即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。任何想法为什么?

【问题讨论】:

您是否尝试设置element.selectionStartelement.selectionEnd?据我所知,它应该可以跨浏览器进行输入和文本区域。 我避免使用它,因为我相信它在早期版本的 IE8 中不起作用。不过我还是会看看的。 我测试的唯一 IE 版本是 IE9,不过祝你好运。 :) 是的,selectionStart 在早期版本的 IE 中似乎不起作用,但无论如何感谢。 =) 可能重复:***.com/questions/1181700/… This 和 this 答案似乎得到了很多认可。 【参考方案1】:

您拥有的代码 sn-p 用于文本输入和文本区域,而不是 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();
        
    

【讨论】:

+1 因为它是一个非常有用的 sn-p 代码。只是一个问题:为什么要通过 win 参数访问全局? @AndreaParodi:允许与 iframe 一起使用。在这种情况下,我们感兴趣的是window 主机对象,而不是它作为全局对象的其他角色。对于 iframe,您可以调用 moveCaret(iframeElement.contentWindow, charCount) 但是,如果您需要移动到上一个文本节点,则会失败为 sel.focusNode == 0 @danm07:你想要什么样的解释?范围和选择方法是标准的并且有据可查。代码简短而简单。此外,如果您想用 cmets 对其进行注释,您也可以这样做。我觉得唯一可能有用的 cmets 是两个主要代码分支(IE 9+ 和其他浏览器,IE 6 - 8)的标签。 @danm07:我在数百个答案中对此感到内疚。我不认为在 SO 上的所有代码中添加运行评论是普遍的做法;我不确定我是否认为应该如此。更多的手动操作会鼓励还是阻止人们查找我在这里使用的浏览器 API?我不知道。无论如何,我在这个答案中添加了一些细节。

以上是关于用Javascript移动光标位置?的主要内容,如果未能解决你的问题,请参考以下文章

javascript 在3个数字之间添加分隔符,并允许它们之间移动。将光标移到好位置

如何获取光标在指定窗口内的具体位置

如何把光标设置在edit中的指定位置

C语言光标移动到控制台制定位置

移动鼠标光标Javascript

用左右光标键移动div