HTML textarea 文本输入框

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

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>元素进行各种操作和交互设计。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
Debian11 安装笔记2:编译安装PHP
JavaScript 数组
WordPress 按自定义排序的两种方法
JavaScript audio 教程
JavaScript class 的 this 指向
如何使主题支持 Woocommerce
HTML input checkbox 复选按钮
Web 组件