?
This document uses PHP Chinese website manual Release
HTML<textarea> 元素表示一個(gè)多行純文本編輯控件。
內(nèi)容類別 | Flow content, phrasing content, Interactive content, listed, labelable, resettable, and submittable form-associated element. |
|---|---|
允許的內(nèi)容 | Text |
標(biāo)記遺漏 | 沒(méi)有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許的父母 | 任何接受 phrasing content 的元素。 |
允許ARIA角色 | 沒(méi)有 |
DOM接口 | HTMLTextAreaElement |
屬性
這個(gè)元素包含全局屬性。
autocapitalize
這是由iOS上的WebKit支持的非標(biāo)準(zhǔn)屬性（因此幾乎所有在iOS上運(yùn)行的瀏覽器，包括Safari，F(xiàn)irefox和Chrome）都控制著用戶輸入/編輯文本值時(shí)是否應(yīng)自動(dòng)大寫。iOS 5及更高版本中提供了不推薦使用的值?？赡艿闹凳牵?/p>
none: 禁用首字母大寫。
sentences: 句子的首字母大寫。
words: 單詞或者字母的首字母大寫。
characters: 全部大寫。
on：自iOS 5以來(lái)已棄用。
off: 自iOS 5以來(lái)已棄用。
autocompleteHTML5
此屬性表示控件的值是否可以由瀏覽器自動(dòng)完成?？赡艿闹凳牵?/p>
off: 不使用瀏覽器的記憶自動(dòng)填充，使用者必須輸入他們想要輸入的所有內(nèi)容?；蛘呔W(wǎng)頁(yè)提供了自己的自動(dòng)填充方法。
on: 瀏覽器根據(jù)用戶之前輸入的內(nèi)容或者習(xí)慣，在用戶輸入的時(shí)候給出相應(yīng)輸入提示。
如果不指明autocomplete屬性，瀏覽器會(huì)從父級(jí)的表單元素上解析是不是開(kāi)啟這個(gè)屬性。表單元素可以是`textarea`元素的父級(jí)<form>或者`textarea`有跟表單相同的id（參見(jiàn)下面的form屬性）。更多請(qǐng)查看<form>的autocomplete屬性。
autofocusHTML5頁(yè)面加載完畢之后是否自動(dòng)給本元素添加焦點(diǎn)。只有跟表格關(guān)聯(lián)的才能使本屬性生效。
cols文本域的可是寬度。必須為正數(shù)，默認(rèn)為20 (HTML5)。
disabled禁用文本域。默認(rèn)為false。如果未指定，也可以從父級(jí)上如<fieldset>繼承而來(lái)。
formHTML5指定跟自身相關(guān)聯(lián)的表單。值必須為本文檔內(nèi)的表單的ID，如果未指定，就是跟當(dāng)前所在的表單元素相關(guān)聯(lián)。這就允許你在文檔的任意地方放置文本域元素。
maxlengthHTML5允許用戶輸入的最大字符長(zhǎng)度 (Unicode) 。未指定表示無(wú)限長(zhǎng)度。
minlengthHTML5允許用戶輸入的最小字符長(zhǎng)度(Unicode)
name元素的名稱。
placeholderHTML5占位符，用來(lái)提示用戶進(jìn)行內(nèi)容輸入。當(dāng)呈現(xiàn)提示時(shí)，占位符文本中的回車或換行回作為換行符。
readonly不允許用戶修改元素內(nèi)文本。和disabled屬性不同的是，這個(gè)能讓用戶點(diǎn)擊和選擇元素內(nèi)的文本。如果在表單里，這個(gè)元素的值還是會(huì)跟隨表單一起提交。
requiredHTML5 提示用戶這個(gè)元素的內(nèi)容必填。
rows元素的輸入文本的行數(shù)（顯示的高度）。
selectionDirection HTML5 選擇 selection 發(fā)生的方向。如果選擇是在LTR語(yǔ)言環(huán)境中從左到右進(jìn)行選擇，或若在RTL語(yǔ)言環(huán)境中從右到左進(jìn)行選擇，選擇“forward”。如果選擇在相反的方向上進(jìn)行，則“backward”。如果選擇方向未知，則“none”
selectionEnd在當(dāng)前選擇的最后一個(gè)字符的索引。
selectionStart在當(dāng)前選擇的第一個(gè)字符的索引。
spellcheckHTML5HTML5 將此屬性的值設(shè)置為true表示元素需要檢查其拼寫和語(yǔ)法。valuedefault指示元素是根據(jù)默認(rèn)行為執(zhí)行的，可能是基于父元素自身的拼寫檢查值。valuefalse指示元素不應(yīng)該被檢查。
wrapHTML5指定文本換行的方式。默認(rèn)為soft?？赡艿闹禐椋?/p>
hard: 在文本到達(dá)元素最大寬度的時(shí)候，瀏覽器自動(dòng)插入換行符(CR+LF) 。比如指定
cols值。
soft: 在到達(dá)元素最大寬度的時(shí)候，不會(huì)自動(dòng)插入換行符。
off：就像可以soft改變外觀white-space: pre，所以線段cols能夠不包裹且區(qū)域能變成水平滾動(dòng)。
如果未指定此屬性，soft則為其默認(rèn)值。
可調(diào)整的textareas
需要Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）
Gecko 2.0引入了對(duì)可調(diào)整大小的textareas的支持。這由resizeCSS屬性控制。默認(rèn)情況下，textareas的大小已啟用，但您可以通過(guò)包含以下CSS來(lái)顯式禁用它：
textarea {
resize: none;}與CSS的交互
從CSS的角度來(lái)看<textarea>是可被替換的元素。HTML 規(guī)范沒(méi)有指定<textarea>的基線。所以不同的瀏覽器可以在任何位置渲染文本域。在Gecko內(nèi)核的瀏覽器中<textarea>的基線是文本的第一行的基線。其他的瀏覽器可能把元素的底部設(shè)置為基線。所以不要使用vertical-align: baseline，在不同瀏覽器中的外觀是不確定的。
和點(diǎn)陣圖像相似，文本域有默認(rèn)的尺寸
例子
HTML內(nèi)容
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
規(guī)范
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) |