Question

我有一个文本区域，一个按钮和一个div

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

这是脚本

<script>
    function test() {
        var b = document.getElementById('mytext').value;
        document.getElementById('here').innerHTML = b;
    }
</script>

我在文字区写了以下文字：

Hello All
Good Morning

但是当我按下Click Me时，它会在div元素中提供以下文字：

Hello All Good Morning

如何在textarea中显示多行？感谢

Answer 1

您必须用br标签替换新行。

示例代码

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

</body>
<script type="text/javascript">
    function test() {
        var b = document.getElementById('mytext').value;
        b = b.replace(/\r|\n/,"<br>");
        document.getElementById('here').innerHTML = b;
    }
</script>
</html>

Answer 2

只需使用replace(/(?:\r\n|\r|\n)/g, '<br />');替换字符串中的所有换行符<br />标记，如：

function test() {
        var b = document.getElementById('mytext').value;
        b = b.replace(/(?:\r\n|\r|\n)/g, '<br />');
        document.getElementById('here').innerHTML = b;
    }

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

Answer 3

您应该使用<br>代码替换换行符。

＆＃13;

function test() {
  var b = document.getElementById('mytext').value;
  document.getElementById('here').innerHTML = b.replace(/\n\r?/g, '<br>');
}

＆＃13;

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

＆＃13;

Answer 4

使用br替换修复文本区域和div大小可以获得有效的结果。

function test() {
  var b = document.getElementById('mytext').value;
  document.getElementById('here').innerHTML = b.replace(/\n\r?/g, '<br>');
}

#here {
  width: 100px;
  height: 100px;
  word-wrap: break-word;
}

#mytext {
  width: 100px;
  height: 100px;
}

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

Answer 5

https://www.w3schools.com/jsref/jsref_split.asp

示例将字符串拆分为子字符串数组：

var str = "How are you doing today?"; var res = str.split(" "); //The result of res will be an array with the values:

输出：今天你是怎么做的？

使用js在div元素中显示多行textarea值

5 个答案: