迹忆客 专注技术分享

本文展示了如何使用纯 JavaScript 设置 <textarea> 值。

什么是 HTML 中的 <textarea>

当你希望允许用户输入大量自由文本作为对评估或反馈模块的评论时，HTML 元素 <textarea> 表示有用的多行文本编辑控件。

<textarea> 提供了几个特性。

1. id 属性允许 <textarea> 与 <label> 元素关联以实现可访问性目的。
2. name 属性，用于指定在提交表单时将发送到服务器的关联数据项的名称。
3. row 和 column 属性允许你指定 <textarea> 应该占用的确切大小。设置这些首选项是保持一致性的好主意，因为浏览器默认值可能会有所不同。
4. 在开始和结束标签之间插入默认内容。 <textarea> 不支持 value 属性。

<textarea> 元素还接受几个通用属性来形成 <input>，例如 autocomplete、autofocus、disabled、wildcard、read-only 和 required .

在 JavaScript 中设置 <textarea> 值

getElementById() 是 JavaScript 提供的集成文档方法，它返回 id 与指定 id 匹配的元素对象。

语法：

getElementById($id)

$id 是一个强制参数，它指定必须匹配的 HTML 属性的 id。如果找到对应的元素，则返回对应的 DOM 元素对象；否则，它返回 null。

现在，让我们使用 getElementById() 提取文本区域节点元素。

<textarea id="address" name="address">Please Fill the address</textarea>
<button id="btn" onclick="clearValue()">Click to clear</button>

function clearValue() {
  document.getElementById('address').value = '';
}

在上面的代码中，我们使用 getElementById 来查找 DOM 中存在的文本区域元素。单击 clear 按钮后，找到文本区域节点。

使用所需的值更新 value 属性。

现在让我们运行上面的代码并点击按钮来移除文本区域的值。它将删除文本区域的值，看起来像这样。

<textarea> 之前：

<textarea> 之后：