2010-10-11 133 views
3

在WebKit innerText似乎返回用戶看到這正是我所需要的元素的文本。Firefox的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> 

功能測試將返回 「\ n富 吧」。

我們的目標是製作一個可編輯的文本區域,其中可以點擊鏈接並突出顯示標籤,以及在輸入時即時創建鏈接和突出顯示。

我的做法是:

在每個KEYUP:

  • 保存光標位置
  • 剪切文本與innerText
  • 解析由innerText
  • 返回的文本的鏈接和標籤
  • 將解析的文本粘貼到可編輯區域
  • 恢復光標位置

謝謝!

+0

我可能會在這裏很晚,但肯定所有你想要的是用戶編輯當前文本節點?因此,所有需要替換的都是光標所在文本節點的值。如果選擇了文本並將其轉換爲鏈接(例如),則必須將文本節點替換爲文本節點和一個連續選定的元素文本作爲文本節點。 – RobG 2012-05-22 03:34:05

回答

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; 
} 
+0

我喜歡這個解決方案,但是舊選擇的丟失是一個不希望的副作用。因爲恢復舊選擇會觸發onfocus事件。閱讀innerText屬性不會觸發onfocus事件 – brillout 2011-01-06 15:04:53