IE10 中的 Html/文本选择

Posted 2023-03-06

【中文标题】IE10 中的 Html/文本选择

【英文标题】：Html/Text selection in IE10

【发布时间】：2013-09-16 00:14:34

【问题描述】：

我需要通过给它一个 ID 选择器来选择一系列 html。我在下面的内容在 Chrome 和 Firefox 中效果很好，但在 IE 10（标准模式）中效果不佳。 （老版本的 IE 不关心这个）

function selectElementContents(elementId) 
    var elemToSelect = document.getElementById(elementId);
    var selection= window.getSelection();
    var rangeToSelect = document.createRange();
    rangeToSelect.selectNodeContents(elemToSelect);
    //console.log(rangeToSelect);
    selection.removeAllRanges();
    selection.addRange(rangeToSelect);

演示：http://jsfiddle.net/7Jayc/

奇怪的是，console.log(rangeToSelect) 行绝对会在 IE 10 中记录正确的文本，但它不会选择它。

【问题讨论】：

事实证明，这段代码在 IE 10 中为我工作，但我遇到了另一个 IE 错误，当它显示在模态窗口。我更改了页面的布局，现在效果很好。

你能在 IE 的模式窗口中选择文本吗？

不，它不能在 IE10 的模式中工作。

【参考方案1】：

这对我来说适用于所有浏览器：

function selectElementContents(elementId) 
    var elemToSelect = document.getElementById(elementId);

    if (document.createRange)      // all browsers but IE
        var selection = window.getSelection();
        var rangeToSelect = document.createRange();
        rangeToSelect.selectNodeContents(elemToSelect);
        //console.log(rangeToSelect);
        selection.removeAllRanges();
        selection.addRange(rangeToSelect);
    
    else       // IE
        var rangeObj = document.body.createTextRange();
        rangeObj.moveToElementText(elemToSelect);
        rangeObj.select();
    

【讨论】：

谢谢，但请参阅我上面对原始问题的评论。这段代码很好，但不是特定于 IE 10。这里的 IE 案例实际上是针对 IE9 及更低版本的，我相信不是 IE 10。

我知道，我只是说document.createRange 存在于 IE 10 中，这就是它在那里工作的原因。 else 是不需要的，因为它是针对 IE