JS 从 Textarea 获取值 - Javascript

在 Web 应用程序中经常要获取用户在输入框中输入的值。Textarea 是一个用于输入多行文本的 HTML 元素，经常用于表单、评论、消息等应用场景中。

如何使用 Javascript 获取 Textarea 中的值？下面将详细介绍。

1. 获取 Textarea 元素

在 Javascript 中，首先需要获取 Textarea 元素。可以使用以下代码：

var textarea = document.getElementById("myTextarea");

其中，myTextarea 是指页面中 Textarea 元素的 id。

如果页面上有多个 Textarea，可以使用以下代码获取所有 Textarea 元素的数组：

var textareas = document.getElementsByTagName("textarea");

2. 获取 Textarea 的值

获取 Textarea 的值非常简单，只需使用以下代码：

var value = textarea.value;

其中，value 是指 Textarea 中输入的文本值。

可以使用以下代码将 Textarea 中的值输出到控制台：

console.log(value);

3. 监听 Textarea 中的输入事件

当用户在 Textarea 中输入文本时，我们希望能够及时获取新输入的内容。可以使用以下代码监听 Textarea 中的 input 事件：

textarea.addEventListener("input", function() {
  var value = textarea.value;
  console.log(value);
});

其中，function() 中的代码将在用户在 Textarea 中输入文本时执行。

4. 完整代码示例

下面是一个获取页面上第一个 Textarea 元素的值，并在用户输入时实时打印到控制台的完整代码示例：

var textarea = document.getElementsByTagName("textarea")[0];

textarea.addEventListener("input", function() {
  var value = textarea.value;
  console.log(value);
});

参考链接

1. MDN Web Docs - Textarea
2. MDN Web Docs - event.target