HTML <textarea> 元素

HTML <textarea> 元素表示一个多行纯文本编辑控件。

一个 HTML 文本区域：

<textarea rows="10" cols="30">我是一个文本框。</textarea>

尝试一下 »

特性

内容类别	流式内容，短语内容，交互内容，可列举的，可标签的，可重置的和可提交的表单相关内容元素。
允许的内容	文本
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受短语内容的元素。
允许的 ARIA 角色	无
DOM 接口	HTMLTextAreaElement

属性

该元素包含了全局属性。

autocapitalize

非标准

这是 iOS 上 WebKit 支持的非标准属性（因此几乎所有在 iOS 上运行的浏览器都支持，包括 Safari，Firefox 和 Chrome），用于控制着文本的值，在用户输入/编辑时如何变为自动大写。可能的值是：

• none：完全禁用自动大写；
• sentences：自动大写每个句子的首字母；
• words：自动大写单词的第一个字母；
• characters：自动大写所有字符。
• on： 自 iOS 5 以来已弃用。
• off： 自 iOS 5 以来已弃用。

autocomplete

HTML5

该属性指示控件的值是否可以由浏览器自动完成。可能的值是：

• off：用户必须明确的输入每个值，或者文档提供自己的自动完成方法；浏览器不会自动完成条目。
• on：浏览器可以根据用户在以前的使用中输入的值自动完成该值。

如果未在 <textarea> 元素中指定 autocomplete 属性，则浏览器会使用 <textarea> 元素所属的表单的 autocomplete 属性值。所属的表可以是 <textarea> 的父级 <form> 元素，或者 id 属性和该元素的 form 属性的值相同的 <form> 元素。有关更多信息，请参阅 <form> 中的 autocomplete 属性。

autofocus

HTML5

这个布尔属性允许您指定表单控件在页面加载时应该获得输入焦点。如果用户点击了不同的控件，该控件将不会获得焦点。文档中只有一个与表单关联的元素可以指定该属性。

cols

文本控件的可见宽度，以平均字符宽度表示。如果指定，它必须是一个正整数。如果未指定，则默认值为 20（HTML5）。

disabled

该布尔属性表示用户不能与控件交互。（如果未指定该属性，则控件从父级元素继承它的设置，例如 <fieldset>; 如果没有设置了 disabled 属性的父级元素，则启用控件。）

form

HTML5

与 <textarea> 元素相关联的表单元素（即表单所有者）。属性的值必须是同一文档中表单元素的 ID。如果未指定该属性，那么 <textarea> 元素必须是表单元素的后代。该属性使您可以将 <textarea> 元素放置在文档中的任何位置，而不仅仅是作为表单元素的后代。

maxlength

HTML5

用户可以输入的最多字符数（Unicode）。如果未指定该值，则用户可以输入不限数量的字符。

minlength

HTML5

用户需要输入的最少字符数（Unicode）。

name

控件的名称。

placeholder

HTML5

关于用户可以输入控件内容的提示。在渲染该提示时，占位符文本中的回车符（\r）或换行符（\n）都会被视为换行符。

readonly

该布尔属性表示用户不能修改控件的值。与 disabled 不一样，readonly 属性不会阻止用户点击或选择控件。表单提交时，仍然会带上只读控件的值。

required

HTML5

该属性指定用户在提交表单之前必须填写值。

rows

控件的可见文本行数。

spellcheck

HTML5

将该属性的值设置为 true 表示该元素需要检查其拼写和语法。 default 值表示该元素将根据默认行为进行操作，可能基于父元素自己的 spellcheck 值。false 值表示不应该检查该元素。

wrap

HTML5

表示控件如何换行文本。可能的值是：

• hard：浏览器自动插入换行符（CR + LF），以便每行不超过控件的宽度；必须指定 cols 属性才有效。
• soft：浏览器确保遇到 CR + LF 才换行，不会插入额外换行符。
• off: 像 soft 一样，但是外观变为 white-space: pre ，所以超过 cols 的值时不会换行，并且内部区域变得可水平滚动。

如果未指定该属性，则默认值是 soft。

事件属性

<textarea> 元素支持 HTML 的事件属性。

使用说明

• <textarea> 元素定义一个多行的文本输入控件。
• 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
• 可以通过 cols 和 rows 属性来规定 <textarea> 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

可调整大小的多行输入框

Gecko 2.0 引入了对可调整大小的多行输入框的支持。这是通过 resize CSS 属性控制的。默认情况下，多行输入框可调整大小，但您可以通过以下 CSS 来显式禁用它：

textarea {
  resize: none;
}

与 CSS 的交互

从 CSS 的角度来看， <textarea> 是一个可被替换的元素。 HTML 规范没有定义 <textarea> 的基线在哪里。所以不同的浏览器将其设置在不同的位置。在 Gecko 中， <textarea> 基线设置在 textarea 第一行的基线上，在另一个浏览器上它可能设置在 <textarea> 框的底部。因此，不要使用 vertical-align : baseline ，因为这种行为在不同浏览器中的外观是不确定的。

更多实例

基本使用

<textarea name="textarea" rows="10" cols="50">在这里写点东西</textarea>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <textarea> 的定义	现行的标准	-
HTML5 <textarea> 的定义	推荐	-
HTML 4.01 Specification <textarea> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Firefox 6 之前，当 <textarea> 获得焦点时，插入点默认放置在文本的末尾。其他主流浏览器将插入点放置在文本的开头。

2. 所有 <textarea> 元素会有默认的背景图像渐变效果，可以使用 background-image: none 禁用。

3. 与其他主流浏览器不同，被禁用的 <textarea> 元素会被加上的 opacity: 0.4 的默认样式。

相关链接

• 其他表单相关的元素：<form>，<button>，<datalist>，<legend>，<label>，<select>，<optgroup>，<option>，<input>，<keygen>，<fieldset>，<output>，<progress> and <meter>。
• HTML DOM 参考手册：Textarea 对象