IE 的 document.selection.createRange 不包括前导或尾随空行

IT技术 javascript internet-explorer dom
2021-02-21 04:48:26

我正在尝试从文本区域中提取确切的选择和光标位置。像往常一样,在大多数浏览器中容易的东西在 IE 中并不容易。

我正在使用这个:

var sel=document.selection.createRange();
var temp=sel.duplicate();
temp.moveToElementText(textarea);
temp.setEndPoint("EndToEnd", sel);
selectionEnd = temp.text.length;
selectionStart = selectionEnd - sel.text.length;

这在 99% 的情况下都有效。问题是TextRange.text不返回前导或尾随换行符。因此,当光标在一个段落之后是几个空行时,它会在前一个段落的末尾产生一个位置 - 而不是实际的光标位置。

例如:

the quick brown fox|    <- above code thinks the cursor is here

|    <- when really it's here

我能想到的唯一解决方法是在选择之前和之后临时插入一个字符,抓取实际选择,然后再次删除这些临时字符。这是一个黑客,但在一个快速的实验中看起来它会起作用。

但首先我想确定没有更简单的方法。

4个回答

我正在添加另一个答案,因为我的上一个答案已经变得有些史诗了。

这是我认为最好的版本:它采用了 bobince 的方法(在我的第一个答案的评论中提到)并修复了我不喜欢它的两件事,首先是它依赖于文本区域之外的 TextRanges (从而损害性能),其次是必须为字符数选择一个巨大的数字来移动范围边界的肮脏。

function getSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

var el = document.getElementById("your_textarea");
var sel = getSelection(el);
alert(sel.start + ", " + sel.end);
@Andy:我写了一个包含这个的 jQuery 插件。尚未记录并与一个非常相关的项目混为一谈,但可以工作:code.google.com/p/rangy/downloads/...
2021-04-23 04:48:26
啊,原来你是 rangy 的创造者。我使用你的答案的项目是一个仅限 IE 的项目,我不使用 jQuery,但我肯定会在某个时候找到你的插件的用处,我敢肯定。
2021-05-01 04:48:26
好的。就像在 moveStart/moveEnd 上使用文本长度而不是真正大数字的想法一样。
2021-05-08 04:48:26
包含此内容的 jQuery 插件现已移至此处:code.google.com/p/rangyinputs
2021-05-16 04:48:26
啊,我没看到这个。结果现在是 20-30 毫秒,出色的工作!
2021-05-18 04:48:26

负数以百万计的举动似乎完美无缺。

这是我的结果:

var sel=document.selection.createRange();
var temp=sel.duplicate();
temp.moveToElementText(textarea);
var basepos=-temp.moveStart('character', -10000000);

this.m_selectionStart = -sel.moveStart('character', -10000000)-basepos;
this.m_selectionEnd = -sel.moveEnd('character', -10000000)-basepos;
this.m_text=textarea.value.replace(/\r\n/gm,"\n");

谢谢 bobince - 当它只是一个评论时,我怎么能投票给你的答案:(

我发布了一个新答案,通过消除将 TextRange 的开头移动到文档正文开头的需要,对此进行了改进。
2021-04-23 04:48:26
是的,这就是为什么在stackoverflow.com/questions/1738808#1739088 中提到的函数返回实际字符​​串,更正为\r\n,而不是索引到值中;我想这里也会发生同样的事情m_text
2021-04-26 04:48:26
是的。你的例子虽然没有返回位置。
2021-05-03 04:48:26
我已经深入研究了这一点。我的结论见我的回答。关于你有什么的两点:如果你在输入而不是 textarea 上使用它会抛出错误,而且它返回的位置是相对于不是输入中实际值的一段文本:我认为选择位置在概念上是输入值内的偏移量,其中包含\r\n每个换行符而不是\n
2021-05-11 04:48:26

一个 jquery 插件,用于在文本区域中获取选择索引的开始和结束。上面的javascript代码不适用于IE7和IE8并且给出了非常不一致的结果,所以我写了这个小的jquery插件。允许临时保存选择的开始和结束索引,并在以后突出显示选择。

一个工作示例和简短版本在这里:http : //jsfiddle.net/hYuzk/3/

带有评论等的更详细版本在这里:http : //jsfiddle.net/hYuzk/4/

        // Cross browser plugins to set or get selection/caret position in textarea, input fields etc for IE7,IE8,IE9, FF, Chrome, Safari etc 
        $.fn.extend({ 
            // Gets or sets a selection or caret position in textarea, input field etc. 
            // Usage Example: select text from index 2 to 5 --> $('#myTextArea').caretSelection({start: 2, end: 5}); 
            //                get selected text or caret position --> $('#myTextArea').caretSelection(); 
            //                if start and end positions are the same, caret position will be set instead o fmaking a selection 
            caretSelection : function(options) 
            { 
            if(options && !isNaN(options.start) && !isNaN(options.end)) 
            { 
            this.setCaretSelection(options); 
            } 
            else 
            { 
            return this.getCaretSelection(); 
            } 
            }, 
            setCaretSelection : function(options) 
            { 
            var inp = this[0]; 
            if(inp.createTextRange) 
            { 
            var selRange = inp.createTextRange(); 
            selRange.collapse(true); 
            selRange.moveStart('character', options.start); 
            selRange.moveEnd('character',options.end - options.start); 
            selRange.select(); 
            } 
            else if(inp.setSelectionRange) 
            { 
            inp.focus(); 
            inp.setSelectionRange(options.start, options.end); 
            } 
            }, 
            getCaretSelection: function() 
            { 
            var inp = this[0], start = 0, end = 0; 
            if(!isNaN(inp.selectionStart)) 
            { 
            start = inp.selectionStart; 
            end = inp.selectionEnd; 
            } 
            else if( inp.createTextRange ) 
            { 
            var inpTxtLen = inp.value.length, jqueryTxtLen = this.val().length; 
            var inpRange = inp.createTextRange(), collapsedRange = inp.createTextRange(); 

            inpRange.moveToBookmark(document.selection.createRange().getBookmark()); 
            collapsedRange.collapse(false); 

            start = inpRange.compareEndPoints('StartToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveStart('character', -inpTxtLen); 
            end = inpRange.compareEndPoints('EndToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveEnd('character', -inpTxtLen); 
            } 
            return {start: Math.abs(start), end: Math.abs(end)}; 

            }, 
            // Usage: $('#txtArea').replaceCaretSelection({start: startIndex, end: endIndex, text: 'text to replace with', insPos: 'before|after|select'}) 
            // Options     start: start index of the text to be replaced 
            //               end: end index of the text to be replaced 
            //              text: text to replace the selection with 
            //            insPos: indicates whether to place the caret 'before' or 'after' the replacement text, 'select' will select the replacement text 

            replaceCaretSelection: function(options) 
            { 
            var pos = this.caretSelection(); 
            this.val( this.val().substring(0,pos.start) + options.text + this.val().substring(pos.end) ); 
            if(options.insPos == 'before') 
            { 
            this.caretSelection({start: pos.start, end: pos.start}); 
            } 
            else if( options.insPos == 'after' ) 
            { 
            this.caretSelection({start: pos.start + options.text.length, end: pos.start + options.text.length}); 
            } 
            else if( options.insPos == 'select' ) 
            { 
            this.caretSelection({start: pos.start, end: pos.start + options.text.length}); 
            } 
            } 
        }); 
“上述javascript代码”是对已接受答案的引用吗?如果是这样,对答案本身的评论会有所帮助,以便我可以在必要时改进答案。你能举一个具体的例子说明它不一致的结果吗?
2021-04-24 04:48:26

注意请参阅我的其他答案以获取我可以提供的最佳解决方案。我把这个留在这里作为背景。

我遇到了这个问题并编写了以下适用于所有情况的内容。在IE中它确实使用了您建议的在选择边界处临时插入一个字符的方法,然后使用document.execCommand("undo")删除插入的字符并防止插入保留在撤消堆栈中。我很确定没有更简单的方法。令人高兴的是,IE 9 将支持selectionStartselectionEnd属性。

function getSelectionBoundary(el, isStart) {
    var property = isStart ? "selectionStart" : "selectionEnd";
    var originalValue, textInputRange, precedingRange, pos, bookmark;

    if (typeof el[property] == "number") {
        return el[property];
    } else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();

        if (range) {
            range.collapse(!!isStart);

            originalValue = el.value;
            textInputRange = el.createTextRange();
            precedingRange = textInputRange.duplicate();
            pos = 0;

            if (originalValue.indexOf("\r\n") > -1) {
                // Trickier case where input value contains line breaks

                // Insert a character in the text input range and use that as
                // a marker
                range.text = " ";
                bookmark = range.getBookmark();
                textInputRange.moveToBookmark(bookmark);
                precedingRange.setEndPoint("EndToStart", textInputRange);
                pos = precedingRange.text.length - 1;

                // Executing an undo command to delete the character inserted
                // prevents this method adding to the undo stack. This trick
                // came from a user called Trenda on MSDN:
                // http://msdn.microsoft.com/en-us/library/ms534676%28VS.85%29.aspx
                document.execCommand("undo");
            } else {
                // Easier case where input value contains no line breaks
                bookmark = range.getBookmark();
                textInputRange.moveToBookmark(bookmark);
                precedingRange.setEndPoint("EndToStart", textInputRange);
                pos = precedingRange.text.length;
            }
            return pos;
        }
    }
    return 0;
}

var el = document.getElementById("your_textarea");
var startPos = getSelectionBoundary(el, true);
var endPos = getSelectionBoundary(el, false);
alert(startPos + ", " + endPos);

更新

根据 bobince 在评论中建议的方法,我创建了以下内容,这似乎运行良好。一些注意事项:

  1. bobince 的方法更简单、更短。
  2. 我的方法是侵入性的:它在恢复这些更改之前对输入的值进行更改,尽管没有明显的效果。
  3. 我的方法的优点是将所有操作都保留在输入中。bobince 的方法依赖于创建从正文开始到当前选择的范围。
  4. 3. 的结果是 bobince 的性能随文档中输入位置的不同而变化,而我的则不然。我的简单测试表明,当输入接近文档开头时,bobince 的方法要快得多。当输入位于大量 HTML 之后时,我的方法会更快。

function getSelection(el) {
    var start = 0, end = 0, normalizedValue, textInputRange, elStart;
    var range = document.selection.createRange();
    var bigNum = -1e8;

    if (range && range.parentElement() == el) {
        normalizedValue = el.value.replace(/\r\n/g, "\n");

        start = -range.moveStart("character", bigNum);
        end = -range.moveEnd("character", bigNum);

        textInputRange = el.createTextRange();
        range.moveToBookmark(textInputRange.getBookmark());
        elStart = range.moveStart("character", bigNum);

        // Adjust the position to be relative to the start of the input
        start += elStart;
        end += elStart;

        // Correct for line breaks so that offsets are relative to the
        // actual value of the input
        start += normalizedValue.slice(0, start).split("\n").length - 1;
        end += normalizedValue.slice(0, end).split("\n").length - 1;
    }
    return {
        start: start,
        end: end
    };
}

var el = document.getElementById("your_textarea");
var sel = getSelection(el);
alert(sel.start + ", " + sel.end);
博宾斯:嗯。看起来你是对的。我确信您的方法存在一些空行问题,但似乎没有。
2021-04-22 04:48:26
bobince:我已经深入研究了这一点。我的结论现在在我的答案中,但是为了回答您最初的问题,我认为支持我的方法的一个原因是我的方法与文档中输入的位置无关,而您的则不是。如果您对大型 HTML 文档末尾的输入使用您的方法,则性能会受到影响。
2021-04-25 04:48:26
这似乎是一个非常混乱的解决方法!是否有任何理由更喜欢它而不是仅使用range.moveStart('character', -10000000)确定文本区域中选择边界方法?这仍然\r\n需要解决,但相比之下,这相对简单。
2021-05-04 04:48:26
有趣的是,即使该moveStart方法实际上并未遍历这些字符中的任何一个,但文档末尾仍存在可测量的性能差异这太奇怪了。(哦,IE...)
2021-05-18 04:48:26
博宾斯:嗯。我不记得我认为存在于您的建议中的问题,现在找不到。我会尽快给您回复。
2021-05-21 04:48:26