HTML <textarea> 元素简介

HTML textarea 标签用于在网页上创建一个多行的文本输入控制台，允许用户输入较长的文本段落。与单行的 <input> 标签不同，textarea 允许文本换行，并且用户可以自由地调整输入区域的大小（如果设置了相应的属性）。这对于收集用户的评论、反馈、描述等大量文本信息非常有用。

基本语法结构如下：

<textarea name="textareaName" rows="numberOfRows" cols="numberOfColumns">
    默认显示的文本内容（可选）
</textarea>

各属性解释：

• name: 必需属性，为文本区域定义唯一的名称，以便在表单提交时服务器可以识别这个字段。
• rows: 可选属性，定义文本区域的可见行数，默认值通常为2。
• cols: 可选属性，定义文本区域的可见列数，默认值通常为20。实际上，现代浏览器会根据页面的实际布局自适应调整宽度，此属性更多作为初始提示。
• 初始化内容：在标签之间的任何文本将作为默认显示的文本内容，当用户开始输入时，这些文本通常会被清除。

其他常用的属性和功能包括：

• placeholder: 提供一个提示信息，当文本区域为空时显示，用户开始输入后消失。
• maxlength: 限制用户在文本区域内能输入的最大字符数。
• disabled: 如果设置，文本区域将被禁用，用户无法编辑其中的内容。
• readonly: 类似于 disabled，但用户仍然可以看到内容，只是不能修改。
• 使用CSS样式来自定义文本区域的外观，如边框、背景色、字体等。

例如，创建一个具有5行高度、30列宽度，带有提示信息的文本区域：

<textarea name="userFeedback" rows="5" cols="30" placeholder="请输入您的反馈或建议..."></textarea>

JavaScript 操作 <textarea>元素

在JavaScript中，可以动态操作<textarea>元素以读取用户输入、设置内容、监听事件等。以下是一些常见的操作方法：

获取<textarea>元素

首先，需要通过ID、类名、标签名等选择器获取到<textarea>元素。常用的方法有getElementById()、querySelector()等。

// 通过ID获取
var textarea = document.getElementById("myTextarea");

// 或者使用querySelector
var textarea = document.querySelector("#myTextarea");

设置和获取内容

• 获取内容：使用.value属性来获取<textarea>中的当前文本内容。

var content = textarea.value;
console.log(content);

• 设置内容：同样通过.value属性，可以设置<textarea>的文本内容。

textarea.value = "这是新设置的文本内容";

监听输入事件

可以监听<textarea>的input或change事件来实时或在内容改变后执行某些操作。

textarea.addEventListener('input', function() {
    console.log("内容改变:", this.value);
});

// 或者监听'change'事件，该事件在元素失去焦点且其值发生改变时触发
textarea.addEventListener('change', function() {
    console.log("内容在失去焦点后改变:", this.value);
});

自动聚焦

可以通过.focus()方法使<textarea>获得焦点，即光标自动定位到该输入框。

textarea.focus();

禁用或启用

• 禁用

textarea.disabled = true;

• 启用

textarea.disabled = false;

通过上述方法，可以灵活地在JavaScript中对<textarea>元素进行各种操作和交互设计。



真诚赞赏，手留余香

微信支付