如果用户点击“输入/返回”键，如何处理 textarea 多行输入答案

【问题标题】：how to process textarea multiple line input if user hit "enter/return" key如果用户点击“输入/返回”键，如何处理 textarea 多行输入
【发布时间】：2023-04-02 07:48:01
【问题描述】：

我的编码：

 ...
 <textarea name="TextArea1" id="TextArea" style="height ; width" ></textarea>
 ...
 <script type="text/javascript">
 var txt_element = document.getElementById("TextArea");
 document.write (txt_element.childNodes[0].nodeValue);
 </script>
 ...

但它不识别“输入/返回”键，而是显示“”

非常感谢

【问题讨论】：

textarea 元素没有值，所以 document.write 将写入一个空字符串。另外，直接访问该值：txt_element.value.

标签： javascript textarea dom

【解决方案1】：

为了扩展 Chris 的答案，问题在于浏览器呈现您编写的文本的方式与呈现任何其他 html 的方式相同，这意味着空格（包括回车）被视为单词分隔符，不是行或段落分隔符。并且多个连续的空白字符被压缩为一个空格。这在html spec 中有进一步解释。

这与它处理 textarea 元素中文本的方式不同。

因此，正如 Chris 所建议的，您需要将字符串中的回车替换为 html <br> 元素：

var enteredText = document.getElementById("TextArea").value;
var updatedText = enteredText.replace(/\n/g, '<br />');
document.write(updatedText);

注意：你应该可以直接用.value而不是.childNodes[0].nodeValue来获取textarea的值。

注意 2：我赞同 Chris 所说的 document.write() - 这通常不是最佳选择。

注意3：如果是非Windows系统，可能还需要更换\r。

【讨论】：

【解决方案2】：

文本区域使用\n 来指定一个新行，这些行应该可以工作：

string = document.getElementById("TextArea")childNodes[0].nodeValue;
string = string.replace(/\n/g, '<br />');
document.write('string');

不确定你是否只是在胡闹，但我不得不提一下，一般来说你不应该使用 document.write()。

【讨论】：