Textarea 文本到表格单元格不会结转回车答案

【问题标题】：Textarea text to table cell doesnt carry over carriage returnsTextarea 文本到表格单元格不会结转回车
【发布时间】：2014-01-02 18:34:44
【问题描述】：

我需要你的帮助，

如何制作一个文本区域，以便在单击按钮时移动文本区域中的显示文本，并在表格单元格中使用回车符？现在的方式，它只是将它们全部合并到表格单元格中的 1 行中。警告框尊重回车。

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">
function test(){

var x = document.getElementById('comments').value

var y = '<table><tr><td>'+x+'</td></tr></table>'

document.getElementById('tbl').innerHTML = y

//alert(x)

}
</script>

</head>

<body>

<div id="tbl"></div>

</body>

</html>

【问题讨论】：

标签： javascript

【解决方案1】：

Textarea 换行符与 HTML 换行符不同。

var text = document.getElementById('comments').value;
text = text.replace(/\r?\n/g, '<br />');

使用上述方法会将换行符转换为标准 HTML 换行符<br/>。

代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
   function test(){

      var x = document.getElementById('comments').value;
          x = x.replace(/\r?\n/g, '<br />');
      var y = '<table><tr><td>'+x+'</td></tr></table>';

      document.getElementById('tbl').innerHTML = y;

   }
</script>
</head>
<body>
   <div id="tbl"></div>
</body>
</html>

【讨论】：

【解决方案2】：

使用以下 CSS：

#tbl {white-space:pre-wrap}

这将保留所有空格，这意味着您可以输入多个空格并且它会起作用。换行符将起作用。真的很长的行会被包裹起来。事实上，它的行为与 textarea 非常相似。整洁！

【讨论】：

【解决方案3】：

在<textarea> 框中可以看到回车，但在 HTML 中会忽略回车。它们需要转换为<br> 标签。

使用.replace(/\n/g, '<br />');将回车转换为<br>标签

代码：http://jsfiddle.net/bluegeek9bluegeek9/d5PBQ/

<!DOCTYPE html>
<html>
<head>
<script>
  function test(){
    var x, y; 
    x = document.getElementById('comments').value.replace(/\n/g, '<br />');
    y = '<table><tr><td>'+x+'</td></tr></table>'
    document.getElementById('tbl').innerHTML = y

}
</script>
</head>
<body>
<div id="tbl"></div>
</body>
</html>

【讨论】：