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以来已弃用。

autocompleteHTML5

  • off: 不使用浏览器的记忆自动填充,使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。

  • on: 浏览器根据用户之前输入的内容或者习惯,在用户输入的时候给出相应输入提示。

如果不指明autocomplete属性,浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级<form>或者`textarea`有跟表单相同的id(参见下面的form属性)。更多请查看<form>的autocomplete属性。

autofocusHTML5页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

  • 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的支持。这由resizeCSS属性控制。默认情况下,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>

规范

SpecificationStatusComment
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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support(Yes)(Yes)(Yes)1 2(Yes)(Yes)(Yes)
autocapitalizeNoNoNoNoNoNo
autocompleteNoNoNoNoNoNo
autofocus(Yes)(Yes)410(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)410(Yes)(Yes)
minlength(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
name(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
placeholder(Yes)(Yes)41011.55
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)

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)(Yes)1 2(Yes)(Yes)(Yes)3
autocapitalizeNoNoNoNoNoNoNo
autocompleteNoNo?NoNoNoNo
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.54
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)