在HTML中用JS输入换行符

Question

我有 3 个输入：

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">

我有一个调用函数的按钮：

<button onclick="myfunction()">click me</button>

这是被调用的 JS 函数，它获取所有输入的值并将整个值显示在文本区域中：

function myfunction() {
  var x =
  "MyText1: " + document.getElementById("id-1").value +
  "MyText2: " + document.getElementById("id-2").value +
  "MyText3: " + document.getElementById("id-1").value;

  document.getElementById("mytext").innerHTML = x; }

这是函数显示输入字段文本的区域：

<textarea id="mytext"></textarea>

到目前为止一切顺利。文本区域如下所示：

"MyText1: input of id-1" "MyText2: input of id-2" "MyText3: input of id-3"

我要实现的是如下输出：

    "MyText1: input of id-1"
    "MyText2: input of id-2"
    "MyText3: input of id-3"

我的问题是，当我将 document.write("\n"); 添加到脚本时，页面崩溃并显示以下控制台文本：Uncaught TypeError: Cannot read property 'value' of null。

这里是一个没有换行符的工作演示： https://jsfiddle.net/6nw8jrk9/

Answer 1

您应该在每个输入值后附加 \n。

<script>
  function myfunction() {
    var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

    document.getElementById("mytext").innerHTML = x; 
   }
</script>

Answer 2

您可以在 var x

中添加换行符

  var x =
  "MyText1: " + document.getElementById("id-1").value + '\n' +
  "MyText2: " + document.getElementById("id-2").value + '\n' +
  "MyText3: " + document.getElementById("id-1").value;

Answer 3

您可以在构建字符串 x 时在每一行的末尾添加一个换行符 (\n)，如下所示：

var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

请参阅下面的工作示例：

function myfunction() {
  var x =
    "MyText1: " + document.getElementById("id-1").value + '\n' +
    "MyText2: " + document.getElementById("id-2").value + '\n' +
    "MyText3: " + document.getElementById("id-1").value;

  document.getElementById("mytext").innerHTML = x;
}

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>

<button onclick="myfunction()">click me</button>

或者，您可以使用 ES6 的 template literals:

function myfunction() {
  var x =
`MyText1: ${ document.getElementById("id-1").value}
MyText2: ${document.getElementById("id-2").value}
MyText3: ${document.getElementById("id-1").value}`;
    
    document.getElementById("mytext").innerHTML = x;
}

<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>

<button onclick="myfunction()">click me</button>

Answer 4

您可以使用 \n 或 HTML 实体将一行分成文本区域 


var x =
  "MyText1: " + "valueInput" + "\n" +
  "MyText2: " + "valueInput" + "&#13;&#10;" +
  "MyText3: " + "valueInput";

  document.getElementById("mytext").innerHTML = x;

<textarea id="mytext"></textarea>

Answer 5

使用document.getElementById("mytext").value = x;

例如：

    <input type="text" id="id-1" value="aa" />
    <input type="text" id="id-2" value="bb" />
    <input type="text" id="id-3" value="cc" />

    <textarea id="mytext"></textarea>

    <button onclick="myfunction()">click me</button>

    <script>
      function myfunction() {
        var x =
          "MyText1: " +
          document.getElementById("id-1").value +
          "\nMyText2: " +
          document.getElementById("id-2").value +
          "\nMyText3: " +
          document.getElementById("id-3").value;

        document.getElementById("mytext").value = x;
      }
    </script>

在HTML中用JS输入换行符

Enter NewLine with JS in HTML

html

javascript

newline