Javascript：如何在Firefox中使用textContent保留换行符？

问题描述：

我在我的网页上有一个div contenteditable。当您在div contenteditable中键入一些文本时，文本会在隐藏的textarea中进行后期处理（form method =“post”action =“...”）。Javascript：如何在Firefox中使用textContent保留换行符？

为此，我使用Chrome，IE和Safari中的innerText以及Firefox中的textContent从div contenteditable中检索文本。

问题是当我在div contenteditable里面输入换行符（通过输入回车键）时，换行符不会出现在textarea中，textarea中的所有文本都出现在一行中。

这里的源代码，很简单：

<style type="text/css"> 

.textarea{ 
overflow: hidden; 
resize: none; 
width: 100%; 
white-space: pre-line; 
border: solid #cccccc 1px ; 
height: 34px; 
} 

</style> 

<form style="width:500px;" method="post"> 

    Div contenteditable : 
    <div class="textarea" contenteditable="true" onkeyup='copy_text_in_textarea(this);'></div> 

    <br>Textarea : 
    <textarea rows="2" class="textarea" id="textarea" name="textarea"></textarea> 

</form> 

<script type="text/javascript"> 

/*Function to reproduce div text in textarea :*/ 
function copy_text_in_textarea(this_contenteditable) 
{  
     document.getElementById("textarea").value = this_contenteditable.textContent;  
} 

</script>

您可以用Firefox在这里试试吧：https://jsfiddle.net/Ls6j041g/

那么如何保留新行的文本区域？

衷心感谢您的提前。

因为新线新的div和你只是阅读的文本。 – epascarello

好的，但如何使textarea出现换行符？ – totoaussi

我发现了一个技巧：使用'innerHTML'而不是'textContext'，并用'\ n'替换'
'标签，并用''''''替换' '标记。 – totoaussi

答

我在Windows 8上使用FF 42.0。在FireFox上，我使用函数html（）而不是textContent（innerText不起作用）。在div里contenteditable，当我们按下输入时会附加“<br>”标签给div内容。所以我尽量>标签转换< BR新线“\ n”在javascript：

JS script: 
jQuery.br2nl = function(varTest){ 
    return varTest.replace(/<br>/g, "\n"); 
}; 
isFirefox = typeof InstallTrigger !== 'undefined'; 
if(isFirefox == true) { 
    message = $("#_chatText").html(); 
    message = $.br2nl(message); 
    document.getElementById("_chatText").innerHTML = message; 
    message = document.getElementById("_chatText").textContent; 
} 
My HTML <div> 
<div contentEditable="true" id="_chatText"></div>

Javascript：如何在Firefox中使用textContent保留换行符？

相关推荐