將換行符僅添加到textContent或innerText - 在Chrome中

這是一個複雜的！我在Chrome中使用contentEditable工作，並且遇到頭部融化問題。當我按下回車鍵時，Chrome會在innerHTML中插入一個新的div。這很好，很棒。問題是換行符無法在div的textContent中找到。我真的需要找出一種方法在與innerHTML中div分隔符相同的位置添加換行符到textContent。將換行符僅添加到textContent或innerText - 在Chrome中

任何想法？

UPDATE：

我可以使用的innerText但後來換行是沒有在頁面加載時被忽略。我需要通過其中一種方法保持一致。換句話說，我需要textContent來顯示新輸入的換行符或innerText以顯示頁面加載時存在的換行符。

這裏有一個更新的演示：

function checkit() { 
 
    var c1 = document.getElementById('c1') 
 
    alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML) 
 
}

div {padding: 20px; border-bottom: 1px solid #CCC;}

<div><a href="#" onclick="checkit()">check it</a></div> 
 

 
<div contentEditable="true" id="c1">click inside this <b>div</b>, 
 
press return and then press <b>check it</b> above</div>

來源

2012-02-17 cronoklee

可能重複[如何插入新行/回車到元素.textContent？]（http://stackoverflow.com/questions/9980416/how-can-i-insert-new-line-carriage- return-into-an-element-textcontent） – 2015-11-24 18:53:37

我已經通過加載不同的變量對每個情況解決了這個：

在頁面加載，我用textContent這使換行符完好。當用戶開始輸入時，我使用innerText來識別插入的分頁符。一個簡單的if語句就可以做到這一點！

來源

2012-02-17 16:22:02 cronoklee

不幸的是，Firefox不支持'innerText' ... – adriantoine 2014-08-19 08:51:25

innerText現在被所有瀏覽器支持：http://caniuse.com/#feat=innertext – cronoklee 2017-02-09 16:55:08

這是因爲textContent不知道的風格。結果，例如，它顯示隱藏的內容。

將c1.textContent更改爲c1.innerText它將顯示換行符。

來源

2012-02-17 15:16:42 Dennis

非常感謝Dennis，但現在我遇到了相反的問題，內容中已存在的換行符被忽略。有什麼方法可以在這裏獲得一致性嗎？（請參閱上面的更新） – cronoklee 2012-02-17 15:58:48

這是它應該如何工作的。沒有顯示HTML頁面中的換行符。改爲使用'
'。 – Dennis 2012-02-17 16:08:57

謝謝，對我來說那工作 – 2017-12-22 03:43:13

將換行符僅添加到textContent或innerText - 在Chrome中

回答

相關問題