Firefox的innerText填充程序

Question

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

是否有 Firefox 的 polyfills？

例如：

<div id='1'><br> f<div style='display:none'>no</div>oo   bar</div>
<script>
function test(){ return document.getElementById('1').innerText }
</script>

函数 test 将返回 "\n foo bar"。

目标是创建一个可编辑的文本区域，在其中链接可以被点击，标记可以被突出显示，并且在打字时链接和突出显示是即时创建的。

我的方法是：

在每个 keyup 事件中：

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

谢谢！

- brillout

---

我可能会在这里待得很晚，但你肯定只想要用户正在编辑的当前文本节点吧？所以你只需要更改光标所在的文本节点的值就可以了。如果选择了文本并将其转换为链接（比如说），那么你就必须用包含选定文本的文本节点和元素来替换文本节点。 - RobG

Answer 1

你可以在Firefox中使用Selection对象的toString()方法，它的作用很像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;
}

- Tim Down

---

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

Answer 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

- brillout

---

作为一条注释，我们现在是在2012年5月，HTML5还没有包括innerText，但它确实有textContent。 - RobG