<textarea>

翻译不完整。 请帮助我们翻译这篇文章!

HTML <textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

上述例子展示了 <textarea> 的几个特点:

  • 为了提高可访问性(accessibility),用于将 <textarea>与一个 <label> 关联的 id 属性。
  • name 属性,用于设置随表单一同提交到服务器的相关数据的名字。
  • rows 和 cols 属性,用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助,因为不同浏览器的默认值常常不一样。
  • 位于开始标签和闭合标签之间的默认内容。<textarea> 不支持 value 属性。

<textarea> 还可以使用 <input> 中的一些常见属性,如autocompleteautofocusdisabledplaceholderreadonly, 和 required

属性

这个元素包含了全局属性

autocapitalize
iOS的非标准属性(运行在iOS上的Safari、Firefox、Chrome都支持),文本是否自动首字母大写。在iOS5和之后的版本上有效。可能的值为:
  • none: 禁用首字母大写。
  • sentences: 句子的首字母大写。
  • words: 单词或者字母的首字母大写。
  • characters: 全部字母大写。
  • on:  自iOS 5废弃。
  • off: 自iOS 5废弃。
autocomplete
是否使用浏览器的记忆功能自动填充文本。可能的值有:
  • off: 不使用浏览器的记忆自动填充,使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
  • on: 浏览器根据用户之前输入的内容或者习惯,在用户输入的时候给出相应输入提示。

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

autofocus
页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。
cols
文本域的可视宽度。必须为正数,默认为20 (HTML5)。
disabled
禁用文本域。默认为false。如果未指定,也可以从父级上如<fieldset>继承而来。
form
指定跟自身相关联的表单。值必须为本文档内的表单的ID,如果未指定,就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。
maxlength
允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。
minlength
允许用户输入的最小字符长度(Unicode) 
name
元素的名称。
placeholder
向用户提示可以在控件中输入的内容。 在渲染提示时,占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断(换行)处理。

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See Labels and placeholders in <input>: The Input (Form Input) element for a full explanation.

readonly
不允许用户修改元素内文本。和 disabled 属性不同的是,这个能让用户点击和选择元素内的文本。如果在表单里,这个元素的值还是会跟随表单一起提交。
required
提示用户这个元素的内容必填。
rows
元素的输入文本的行数(显示的高度)。
spellcheck
该属性设为true时,表明该元素会做拼写和语法检查。属性值为default时,表明元素有默认行为,可能会基于父元素的spellcheck值。属性值为false时,表明元素不做拼写和语法检查。
wrap
指定文本换行的方式。默认为soft。可能的值为:
  • hard: 在文本到达元素最大宽度的时候,浏览器自动插入换行符(CR+LF) 。比如指定 cols值。
  • soft: 在到达元素最大宽度的时候,不会自动插入换行符。

使用 CSS 样式

<textarea>可被替换的元素——其有自己的固有尺寸,像。默认情况下,其 display 值为 block。与其他表单元素相比,这个元素相对比较容易设置样式,使用常规的 CSS 就可以轻松设置它的盒模型、字体、颜色方案等。

Styling HTML forms 这个页面提供了一些关于 <textarea> 样式的有用提示。

基线不一致

The HTML specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box. Don't use vertical-align: baseline on it; the behavior is unpredictable.

控制文本区是否可调整大小

In most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly disable it using a resize value of none:

textarea {
  resize: none;
}

在样式中使用有效值和无效值

Valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlengthmaxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}

示例

HTML 内容

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

基本示例

The following example show a very simple textarea, with a set numbers of rows and columns and some default content.

<textarea name="textarea"
   rows="10" cols="50">Write something here</textarea>

最小和最大长度

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

<textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20">Write something here</textarea>

Note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid. Also note that even if you have a minlength value set (3, for example), an empty <textarea> is still considered valid unless you also have the required attribute set.

占位符

This example has a placeholder set. Notice how it disappears when you start typing into the box.

<textarea name="textarea"
   rows="5" cols="30"
   placeholder="Comment text."></textarea>

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See Labels and placeholders in <input>: The Input (Form Input) element for a full explanation.

禁用和只读

This example shows two <textarea>s — one of which is disabled, and one of which is readonly. Have a play with both and you'll see the difference in behavior — the disabled element is not selectable in any way (and its value is not submitted), whereas the readonly element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.

Note: In browsers other than firefox, such as chrome, the disabled textarea content may be selectable and copyable.

<textarea name="textarea"
   rows="5" cols="30"
   disabled>I am a disabled textarea</textarea>
<textarea name="textarea"
   rows="5" cols="30"
   readonly>I am a readonly textarea</textarea>

技术概览

Content categories Flow contentphrasing contentInteractive contentlistedlabelableresettable, and submittable form-associated element.
Permitted content Text
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role textbox
Permitted ARIA roles No role permitted
DOM interface HTMLTextAreaElement

规范

Specification Status Comment
HTML Living Standard
<textarea>
Living Standard
HTML5
<textarea>
Recommendation
HTML 4.01 Specification
<textarea>
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textareaChrome Full support YesEdge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.
Samsung Internet Android Full support Yes
autocapitalize
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
autocompleteChrome Full support 66Edge No support No
Notes
No support No
Notes
Notes See issue 758078.
Firefox Full support 59IE No support NoOpera No support NoSafari Full support Yes
Notes
Full support Yes
Notes
Notes See bug 150731.
WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
autofocusChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
colsChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
maxlengthChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
minlengthChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
placeholderChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11.5Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 4Samsung Internet Android Full support Yes
readonlyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
requiredChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rowsChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
spellcheckChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
wrapChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

参见

其他与表单相关的元素: