textarea
<textarea>
HTML<textarea> 元素表示一个多行纯文本编辑控件。
内容类别 | Flow content, phrasing content, Interactive content, listed, labelable, resettable, and submittable form-associated element. |
---|---|
允许的内容 | Text |
标记遗漏 | 没有,起始和结束标签都是强制性的。 |
允许的父母 | 任何接受 phrasing content 的元素。 |
允许ARIA角色 | 没有 |
DOM接口 | HTMLTextAreaElement |
属性
这个元素包含全局属性。
autocapitalize
none
: 禁用首字母大写。
sentences
: 句子的首字母大写。
words
: 单词或者字母的首字母大写。
characters
: 全部大写。
on
:自iOS 5以来已弃用。
off
: 自iOS 5以来已弃用。
autocomplete
HTML5
off
: 不使用浏览器的记忆自动填充,使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
on
: 浏览器根据用户之前输入的内容或者习惯,在用户输入的时候给出相应输入提示。
如果不指明autocomplete属性,浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级<form>或者`textarea`有跟表单相同的id(参见下面的form属性)。更多请查看<form>的autocomplete属性。
autofocus
HTML5页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。
- hard: 在文本到达元素最大宽度的时候,浏览器自动插入换行符(CR+LF) 。比如指定
cols
值。
- soft: 在到达元素最大宽度的时候,不会自动插入换行符。
off
:就像可以soft
改变外观white-space: pre,
所以线段cols能够
不包裹且区域能变成水平滚动。
如果未指定此属性,soft
则为其默认值。
可调整的textareas
需要Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
Gecko 2.0引入了对可调整大小的textareas的支持。这由resize
CSS属性控制。默认情况下,textareas的大小已启用,但您可以通过包含以下CSS来显式禁用它:
textarea {
resize: none;
}
与CSS的交互
从CSS的角度来看<textarea>是可被替换的元素。HTML 规范没有指定<textarea>的基线。所以不同的浏览器可以在任何位置渲染文本域。在Gecko内核的浏览器中<textarea>的基线是文本的第一行的基线。其他的浏览器可能把元素的底部设置为基线。所以不要使用vertical-align: baseline,在不同浏览器中的外观是不确定的。
和点阵图像相似,文本域有默认的尺寸
例子
HTML内容
<textarea name="textarea"
rows="10" cols="50">Write something here</textarea>
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<textarea>' in that specification. | Living Standard | |
HTML5The definition of '<textarea>' in that specification. | Recommendation | |
HTML 4.01 SpecificationThe definition of '<textarea>' in that specification. | Recommendation | |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes)1 2 | (Yes) | (Yes) | (Yes) |
autocapitalize | No | No | No | No | No | No |
autocomplete | No | No | No | No | No | No |
autofocus | (Yes) | (Yes) | 4 | 10 | (Yes) | (Yes) |
cols | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
disabled | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
form | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
maxlength | (Yes) | (Yes) | 4 | 10 | (Yes) | (Yes) |
minlength | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
placeholder | (Yes) | (Yes) | 4 | 10 | 11.5 | 5 |
readonly | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
required | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
rows | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
spellcheck | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
wrap | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | (Yes)1 2 | (Yes) | (Yes) | (Yes)3 |
autocapitalize | No | No | No | No | No | No | No |
autocomplete | No | No | ? | No | No | No | No |
autofocus | ? | ? | ? | 4 | ? | ? | ? |
cols | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
disabled | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
form | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
maxlength | ? | ? | (Yes) | 4 | ? | ? | ? |
minlength | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
placeholder | ? | ? | (Yes) | 4 | ? | 11.5 | 4 |
readonly | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
required | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
rows | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
spellcheck | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
wrap | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |