Question

我需要你的帮助，

如何创建一个textarea，只需单击一个按钮就可以在表格单元格中使用回车移动textarea中的显示文本？它现在的方式，它只是将它全部组合成表格单元格中的一行。警告框尊重回车。

enter image description here

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

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

Answer 2

使用以下CSS：

#tbl {white-space:pre-wrap}

这将保留所有空格，这意味着您可以输入多个空格，它将起作用。换行将起作用。真的很长的行将被包裹。事实上，它的行为非常像textarea。整齐！

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

Textarea文本到表格单元格不会带有回车符

3 个答案: