javascript - 如果用户点击 "enter/return"键，如何处理 textarea 多行输入

Question

我的代码:

 ...
 <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>
 ...

但它不识别“enter/return”键，而是显示“”

非常感谢

Answer 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 .

注 2:我支持 Chris 关于 document.write() 的说法- 它通常不是最佳选择。

注意 3:如果您要为非 Windows 系统提供服务，您可能还需要替换 \r .