Question

我的网页上有div contenteditable。当您在div contenteditable中键入一些文本时，文本将在隐藏的文本区域中进行后处理（form method =“post”action =“...”）。

为此，我使用Chrome浏览器，IE浏览器和Safari中的div contenteditable以及Firefox中的innerText检索textContent中的文字。

问题是当我在div contenteditable内键入换行符（通过键入Enter键）时，换行符不会出现在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/

那么如何保留textarea的换行符？

提前感谢您，亲切。

Answer 1

我在Windows 8上使用FF 42.0。在FireFox上，我使用函数html（）而不是textContent（innerText不起作用）。在div中，当我们按下输入时，它会附加＆＃34;＆lt; br＆gt;＆＃34;标记为div内容。所以我尝试转换＆lt; br＆gt;标记为新行＆＃34; \ n＆＃34;在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保留换行符？

1 个答案: