解锁 HTML 文本域标签的奥秘：终极指南

实例演示 在 html 中，文本域标签就像这样：

<textarea>文本在此输入</textarea>

它创建了一个多行文本输入框，允许用户输入多行文本。

属性 文本域标签支持多种属性，以自定义其行为和外观：

• rows：指定文本域中的可见行数。
• cols：指定文本域中的可见列数。
• name：指定文本域的名称，用于识别服务器端提交。
• disabled：禁用文本域，使其不可编辑。
• readonly：使文本域只读，用户可以读取但不能编辑。
• placeholder：提供提示文本，在文本域为空时显示。
• wrap：指定文本是否在文本域中自动换行。

示例：

<textarea rows="5" cols="20" name="myTextArea"></textarea>

这将创建一个 5 行、20 列的文本域，用户可以输入文本。

事件处理 文本域标签支持以下事件：

• oninput：当文本域的值发生更改时触发。
• onfocus：当文本域获得焦点时触发。
• onblur：当文本域失去焦点时触发。
• onsubmit：当表单提交时触发。

示例：

<textarea oninput="myFunction()"></textarea>

这将在文本域的值发生更改时调用 myFunction() 函数。

高级用例

自动增长：使用 CSS 可以让文本域随着文本输入的增加而自动增长。

textarea {
  resize: vertical;
}

文本计数器：可以通过 javascript 添加一个文本计数器来显示文本域中输入的字符数。

const textarea = document.querySelector("textarea");
const counter = document.querySelector("#counter");

textarea.addEventListener("input", () => {
  counter.textContent = textarea.value.length;
});

限制输入：通过使用正则表达式，可以限制文本域接受的输入类型。

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", () => {
  const regex = /^[a-zA-Z0-9 ]+$/;
  if (!regex.test(textarea.value)) {
    textarea.value = textarea.value.replace(/[^ws]/g, "");
  }
});

这将限制文本域只接受字母、数字和空格。

结论 文本域标签提供了在 HTML 表单中创建多行文本输入框的强大方式。通过了解其属性、事件和高级用例，开发者可以创建功能强大且用户友好的文本输入界面。