Javascript Firefox的innerText polyfill

Javascript Firefox的innerText polyfill,javascript,firefox,html,cross-browser,Javascript,Firefox,Html,Cross Browser,在WebKitinnerText中,似乎返回了用户看到的元素的文本,这正是我所需要的 Firefox是否有任何多边形填充 例如: <div id='1'><br> f<div style='display:none'>no</div>oobar</div> <script> function test(){ return document.getElementById('1').innerText } </scrip

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

Firefox是否有任何多边形填充

例如:

<div id='1'><br> f<div style='display:none'>no</div>oobar</div> <script> function test(){ return document.getElementById('1').innerText } </script>
fnooobar 函数测试(){return document.getElementById('1').innerText} 函数测试将返回“\n foobar”

目标是创建一个可编辑的文本区域,在该区域中可以单击链接,突出显示标记,并在键入时动态创建链接和突出显示

我的做法是:

在每个关键点上:

  • 保存光标位置
  • 使用
    innerText
  • 解析
    innerText
  • 将解析后的文本粘贴到可编辑区域
  • 恢复光标位置

谢谢

您可以在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;
}

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


请参见和

我喜欢这个解决方案,但旧选择的丢失是一个不希望出现的副作用。因为恢复旧选择会触发onfocus事件。阅读innerText属性不会触发onfocus事件作为评论,我们是在2012年5月,HTML5还没有包含innerText,尽管它确实包含。我可能会很晚才到,但您肯定只需要用户正在编辑的当前文本节点?因此,需要替换的只是光标所在的文本节点的值。如果选择了文本并将其转换为链接(例如),则必须将文本节点替换为文本节点和包含选定文本的元素作为文本节点。