使用 JavaScript 向文本区域添加换行符

作者

使用 JavaScript 向文本区域添加换行符

Add Line breaks to a Textarea using JavaScript

要向文本区域添加换行符，请使用加法 (+) 运算符并在要添加换行符
\r\n的位置添加字符串，例如
'line one' + '\r\n' + 'line two'. \r和字符的组合\n
用作换行符。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <label for="message">Your message:</label>
    <textarea id="message" name="message" rows="5" cols="33"></textarea>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const message = document.getElementById('message');

message.value = 'line one' + '\r\n' + 'line two' + '\r\n' + 'line three';

/**
 * line one
 * line two
 * line three
 */
console.log(message.value);

如果我打开浏览器，我可以看到在我使用字符的地方添加了换行符\r\n。

文本区域换行符

该\r字符将光标移动到行首，但不会将其移动到下一行。

该\n字符将光标向下移动到下一行，但不会将其返回到行首。

人物组合\r\n：

  • 将光标移动到行首
  • 将光标向下移动到下一行
console.log如果您设置 textarea 的值，您会看到换行符被保留。

您还可以使用模板文字来获得相同的结果。

索引.js
const message = document.getElementById('message');

const first = 'line one';
const second = 'line two';
const third = 'line three';

message.value = `${first}\r\n${second}\r\n${third}`;

我们在示例中使用
了模板文字
。

该字符串包含在反引号中，而不是单引号中。

美元符号花括号语法允许我们直接在模板字符串中计算表达式。

–