HTML | DOM Textarea 表单属性

Textarea 是一种用于多行文本输入的 HTML 表单元素。使用它，用户可以轻松地输入或编辑长篇文本，例如评论、回复等。本文将介绍 Textarea 的 HTML 属性以及在 DOM 编程中如何操作 Textarea。

HTML 属性

Textarea 元素可以设置的 HTML 属性有以下几个：

1. cols

用于设置 Textarea 的宽度（列数）。

<textarea cols="30"></textarea>

2. rows

用于设置 Textarea 的高度（行数）。

<textarea rows="10"></textarea>

3. name

用于设置 Textarea 的名称，该名称将与值一起作为表单数据提交到服务器。

<textarea name="comment"></textarea>

4. placeholder

用于在 Textarea 中显示一个灰色的占位符文本。

<textarea placeholder="请输入评论"></textarea>

5. readonly

用于设置 Textarea 是否只读，只读的 Textarea 无法编辑。

<textarea readonly></textarea>

6. autofocus

用于设置页面加载时自动聚焦到 Textarea 中，无需手动点击。

<textarea autofocus></textarea>

7. required

用于设置 Textarea 是否为必填项，如果未填写则无法提交表单。

<textarea required></textarea>

除此之外，Textarea 还可以设置其他的 HTML 属性，如 class、id、style 等，这些属性与其他 HTML 元素相同。

DOM 操作

在 DOM 编程中，我们通常通过 JavaScript 访问和操作 Textarea 元素。以下是一些常见的 DOM 操作：

1. 获取 Textarea 元素

可以使用 document.getElementById() 方法获取页面中的 Textarea 元素，并将它保存为变量以便后续操作。

<textarea id="myTextarea"></textarea>

let myTextarea = document.getElementById("myTextarea");

2. 获取和设置 Textarea 的值

可以使用 value 属性获取或设置 Textarea 中的文本。

let myTextarea = document.getElementById("myTextarea");
let text = myTextarea.value; // 获取 Textarea 中的文本
myTextarea.value = "Hello World"; // 设置 Textarea 的文本

3. 获取和设置 Textarea 的行数和列数

可以使用行和列属性获取或设置 Textarea 的行数和列数。

let myTextarea = document.getElementById("myTextarea");
let row = myTextarea.rows; // 获取 Textarea 的行数
let col = myTextarea.cols; // 获取 Textarea 的列数

myTextarea.rows = 20; // 设置 Textarea 的行数为 20
myTextarea.cols = 80; // 设置 Textarea 的列数为 80

4. 获取和设置 Textarea 的只读状态

可以使用 readonly 属性获取或设置 Textarea 的只读状态。

let myTextarea = document.getElementById("myTextarea");
let isReadOnly = myTextarea.readOnly; // 获取 Textarea 的只读状态

myTextarea.readOnly = true; // 设置 Textarea 为只读状态

5. 监听 Textarea 的输入事件

可以使用 oninput 事件监听 Textarea 的输入事件，并在用户输入文字时执行相应的操作。

<textarea id="myTextarea" oninput="handleInput()"></textarea>

function handleInput() {
  console.log("用户输入了：" + myTextarea.value);
}

6. 获取和设置 Textarea 的焦点

可以使用 focus() 和 blur() 方法设置或清除 Textarea 的焦点。

let myTextarea = document.getElementById("myTextarea");
myTextarea.focus(); // 将焦点设置到 Textarea
myTextarea.blur(); // 将焦点从 Textarea 中移除

结语

以上就是关于 Textarea 的 HTML 属性和在 DOM 编程中的常用操作。通过这些属性和方法，开发人员可以轻松地创建和操作 Textarea 输入框。