<textarea>：文字區域元素

試一試

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #999999;
}

label {
  display: block;
  margin-bottom: 10px;
}

上面的示例演示了 <textarea> 的許多功能

• 一個 id 屬性，用於使 <textarea> 與 <label> 元素關聯，以實現可訪問性
• 一個 name 屬性，用於設定表單提交時傳送到伺服器的關聯資料點的名稱。
• rows 和 cols 屬性允許你為 <textarea> 指定精確的尺寸。設定這些屬性有助於保持一致性，因為瀏覽器預設值可能有所不同。
• <textarea> 元素在 HTML 和 JavaScript 上下文中指定其內容的方式不同
  • 在 HTML 中，<textarea> 的初始內容是在其開始和結束標籤之間指定的，而不是作為 value 屬性。
  • 在 JavaScript 中，<textarea> 元素有一個 value 屬性，可用於獲取或設定當前內容，以及 defaultValue 用於獲取和設定其初始值（相當於訪問 HTML 元素的文字內容）。

<textarea> 元素還接受一些與表單 <input> 常見的屬性，例如 autocapitalize、autocomplete、autofocus、disabled、placeholder、readonly 和 required。

屬性

此元素包含全域性屬性。

autocapitalize

控制輸入文字是否自動大寫，以及以何種方式大寫。

autocomplete

控制瀏覽器是否可以自動完成輸入的文字。可能的值是

• off：使用者每次使用都必須顯式地在此欄位中輸入一個值，或者文件提供了自己的自動完成方法；瀏覽器不會自動完成輸入。
• on：瀏覽器可以根據使用者之前使用時輸入的值自動完成該值。
• <token-list>：一組有序的、空格分隔的自動填充詳細資訊令牌，可選地前面可以有一個分割槽令牌、一個賬單或送貨分組令牌，和/或一個標識接收者型別的令牌。

未指定 autocomplete 屬性的 <textarea> 元素會繼承其表單所有者上設定的 autocomplete 狀態（on 或 off）。表單所有者可以是此 <textarea> 元素的祖先 <form> 元素，或者是其 id 由輸入元素的 form 屬性指定的表單元素。有關更多資訊，請參閱 <form> 中的 autocomplete 屬性。

autocorrect

控制使用者編輯此 textarea 時，是否啟用自動拼寫校正和文字處理。允許的值是

啟用

啟用自動拼寫校正和文字替換。

關閉

停用自動拼寫校正和文字替換。

autofocus

此布林屬性允許你指定頁面載入時表單控制元件是否應具有輸入焦點。文件中只能有一個與表單關聯的元素可以指定此屬性。

cols

文字控制元件的可見寬度，以平均字元寬度為單位。如果指定，它必須是一個正整數。如果未指定，預設值為 20。

dirname

此屬性用於指示元素內容的文字方向。有關更多資訊，請參閱 dirname 屬性。

disabled

此布林屬性表示使用者無法與控制元件互動。如果未指定此屬性，控制元件會繼承其包含元素的設定，例如 <fieldset>；如果在設定 disabled 屬性時沒有包含元素，則控制元件已啟用。

form

與 <textarea> 元素關聯的表單元素（其“表單所有者”）。屬性的值必須是同一文件中表單元素的 id。如果未指定此屬性，則 <textarea> 元素必須是表單元素的後代。此屬性允許你將 <textarea> 元素放置在文件中的任何位置，而不僅僅是作為表單元素的後代。

maxlength

使用者可以輸入的最大字串長度（以 UTF-16 程式碼單元衡量）。如果未指定此值，使用者可以輸入無限數量的字元。

minlength

使用者應輸入的最小字串長度（以 UTF-16 程式碼單元衡量）。

name

控制元件的名稱。

placeholder

向用戶提示可以在控制元件中輸入什麼。佔位符文字中的回車或換行符在渲染提示時必須視為換行符。

注意：佔位符只應用於顯示錶單中應輸入的資料型別的示例；它們不能替代與輸入關聯的正確 <label> 元素。有關完整解釋，請參閱 <input> 標籤。

readonly

此布林屬性表示使用者不能修改控制元件的值。與 disabled 屬性不同，readonly 屬性不會阻止使用者單擊或選擇控制元件。只讀控制元件的值仍然會隨表單提交。

required

此屬性指定使用者在提交表單之前必須填寫一個值。

rows

控制元件的可見文字行數。如果指定，它必須是一個正整數。如果未指定，預設值為 2。

spellcheck

指定 <textarea> 是否受底層瀏覽器/作業系統的拼寫檢查。值可以是

• true：表示元素需要進行拼寫和語法檢查。
• default：表示元素應根據預設行為操作，可能基於其父元素自身的 spellcheck 值。
• false：表示元素不應進行拼寫檢查。

wrap

指示控制元件應如何包裝值以進行表單提交。可能的值是

• hard：瀏覽器會自動插入換行符（CR+LF），使每行不超過控制元件的寬度；必須指定 cols 屬性才能使其生效
• soft：瀏覽器確保輸入值中的所有換行符都是 CR+LF 對，但不會向值新增額外的換行符。
• off 非標準 ：與 soft 類似，但將外觀更改為 white-space: pre，因此超出 cols 的行段不會換行，並且 <textarea> 會變得水平可滾動。

如果未指定此屬性，soft 是其預設值。

使用 CSS 樣式

<textarea> 是一個 替換元素——它具有內在尺寸，就像點陣圖影像一樣。預設情況下，它的 display 值是 inline-block。與其他表單元素相比，它相對容易樣式化，其盒模型、字型、配色方案等都可以使用常規 CSS 輕鬆操作。

HTML 表單樣式提供了一些關於 <textarea> 樣式化的有用技巧。

基線不一致

HTML 規範沒有定義 <textarea> 的基線在哪裡，因此不同的瀏覽器將其設定在不同的位置。對於 Gecko，<textarea> 基線設定在文字區域第一行的基線上，在其他瀏覽器上它可能設定在 <textarea> 框的底部。不要對其使用 vertical-align: baseline；行為是不可預測的。

控制文字區域是否可調整大小

在大多數瀏覽器中，<textarea> 是可調整大小的——你會注意到右下角的拖動手柄，可用於更改頁面上元素的大小。這由 resize CSS 屬性控制——預設情況下啟用調整大小，但你可以使用 resize 的值 none 顯式停用它

textarea {
  resize: none;
}

有效和無效值的樣式

<textarea> 元素的有效和無效值（例如，那些在 minlength、maxlength 或 required 設定的界限之內或之外的值）可以使用 :valid 和 :invalid 偽類突出顯示。例如，根據文字區域是否有效或無效，為其提供不同的邊框

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

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

示例

基本示例

以下示例顯示了一個具有固定行數和列數、一些預設內容以及阻止使用者將元素大小調整為超過 500 畫素寬和 130 畫素高的 CSS 樣式的文字區域

<textarea name="textarea" rows="5" cols="15">Write something here</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

使用“minlength”和“maxlength”的示例

此示例具有最小和最大字元數，分別為 10 和 20。嘗試一下就知道了。

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

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

請注意，minlength 不會阻止使用者刪除字元，導致輸入數量超出最小值，但它會使輸入到 <textarea> 的值無效。另請注意，即使你設定了 minlength 值（例如 3），空 <textarea> 仍被認為是有效的，除非你也設定了 required 屬性。

使用“placeholder”的示例

此示例設定了一個佔位符。請注意，當你開始在框中輸入時，它會消失。

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

textarea {
  max-height: 130px;
  max-width: 500px;
}

結果

停用和只讀文字區域

此示例顯示了兩個 <textarea>——一個 readonly，一個 disabled。你無法編輯這兩個元素的內容，但 readonly 元素可聚焦，其值會在表單中提交。disabled 元素的值不會提交，並且不可聚焦。

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

textarea {
  display: block;
  resize: horizontal;
  max-width: 500px;
}

結果

技術摘要

規範

瀏覽器相容性

另見

• 其他與表單相關的元素
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>