用于 Firefox 的 innerText polyfill答案

【问题标题】：innerText polyfill for Firefox用于 Firefox 的 innerText polyfill
【发布时间】：2011-04-23 21:33:42
【问题描述】：

在 WebKit 中 innerText 似乎返回了用户看到的元素的文本，这正是我所需要的。

是否有任何适用于 Firefox 的 polyfill？

例如：

foo bar

函数 test(){ 返回 document.getElementById('1').innerText } 脚本>

函数测试将返回“\n foo bar”。

我们的目标是创建一个可编辑的文本区域，其中的链接是可点击的，标签会突出显示，并且在输入时会即时创建链接和突出显示。

我的做法是：

在每次按键时：

保存光标位置
用innerText剪切文本
解析innerText返回的文本的链接和标签
将解析后的文本粘贴到可编辑区域
恢复光标位置

谢谢！

【问题讨论】：

我可能很晚才到，但您肯定想要的只是用户正在编辑的当前文本节点吗？因此，您需要替换的只是光标所在文本节点的值。如果选择了文本并将其转换为链接（例如），则必须将文本节点替换为文本节点和包含所选内容的元素text 作为文本节点。

标签： javascript firefox html cross-browser

【解决方案1】：

您可以在 Firefox 中使用Selection 对象的toString() 方法，其作用类似于innerText。由于您在示例中提取 innerText 之前已经保存了光标位置，因此以下内容无需保存和恢复选择，否则您应该这样做。

function getInnerText(el) {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.addRange(range);
        text = sel.toString();
        sel.removeAllRanges();
    }
    return text;
}

【讨论】：

我喜欢这个解决方案，但旧选择的丢失是一个不受欢迎的副作用。因为恢复旧的选择会触发 onfocus 事件。读取 innerText 属性不会触发 onfocus 事件

【解决方案2】：

Firefox 可能会实现 innerText，因为 Aryeh Gregor 正在为 innerText 编写规范。

见http://aryeh.name/spec/innertext/innertext.html和http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-February/030179.html

【讨论】：

作为评论，我们现在是 2012 年 5 月，HTML5 还没有包含 innerText，尽管它确实有 textContent。