1. Web
  2. Web API
  3. HTMLTextAreaElement

HTMLTextAreaElement

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

HTMLTextAreaElement 介面提供了用於操作 <textarea> 元素的佈局和顯示屬性與方法。

EventTarget Node Element HTMLElement HTMLTextAreaElement

例項屬性

它還繼承了其父介面 HTMLElement 的屬性。

autocomplete

一個字串，表示元素的 autocomplete 屬性。

cols

一個數字，表示元素的 cols 屬性，指示文字區域的可見寬度。

defaultValue

一個字串，表示控制元件的預設值，其行為類似於 Node.textContent 屬性。

dirName

一個字串，表示元素的文字方向。

disabled

一個布林值，表示元素的 disabled 屬性，指示控制元件不可互動。

form 只讀

返回對父級表單元素的引用。如果此元素不包含在表單元素中，則它可以是同一文件中任何 <form> 元素的 id 屬性，或者值為 null。

labels 只讀

返回與此元素關聯的 <label> 元素的 NodeList。

maxLength

一個數字，表示元素的 maxlength 屬性，指示使用者可以輸入的字元的最大數量。此約束僅在值更改時進行評估。

minLength

一個數字，表示元素的 minlength 屬性，指示使用者可以輸入的字元的最小數量。此約束僅在值更改時進行評估。

name

一個字串，表示元素的 name 屬性，包含控制元件的名稱。

placeholder

一個字串，表示元素的 placeholder 屬性，包含提示使用者在控制元件中輸入什麼的文字。

readOnly

一個布林值，表示元素的 readonly 屬性，指示使用者無法修改控制元件的值。

required

一個布林值，表示元素的 required 屬性，指示使用者在提交表單之前必須指定一個值。

rows

一個數字，表示元素的 rows 屬性，指示控制元件的可見文字行數。

selectionDirection

一個字串，表示文字選擇發生的文字方向。如果選擇是按當前區域設定的從開始到結束的方向進行的，則為 forward；反之則為 backward。如果方向未知，則也可以是 none。

selectionEnd

一個數字，表示選定文字的結束索引。如果沒有選擇文字，則包含緊跟輸入游標的字元的索引。在設定時，控制元件的行為如同呼叫了 setSelectionRange()，並將此值作為第二個引數，將 selectionStart 作為第一個引數。

selectionStart

一個數字，表示選定文字的開始索引。如果沒有選擇文字，則包含緊跟輸入游標的字元的索引。在設定時，控制元件的行為如同呼叫了 setSelectionRange()，並將此值作為第一個引數，將 selectionEnd 作為第二個引數。

textLength 只讀

返回控制元件 value 的碼點長度。與讀取 value.length 相同。

type 只讀

返回字串 textarea。

validationMessage 只讀

返回一個本地化的訊息，描述控制元件不滿足的驗證約束（如果有）。如果控制元件不是約束驗證的候選者（willValidate 為 false），或者它滿足其約束，則此訊息為空字串。

validity 只讀

返回此元素所處的有效性狀態。

value

一個字串，表示控制元件中包含的原始值。

willValidate 只讀

返回該元素是否是約束驗證的候選者。如果任何條件阻止其進行約束驗證，包括其 readOnly 或 disabled 屬性為 true，則返回 false。如果該控制元件不是約束驗證的候選者，或者它滿足其約束，則返回 true。

wrap

一個字串，表示元素的 wrap 屬性，指示控制元件如何換行文字。

例項方法

它還繼承了其父介面 HTMLElement 的方法。

checkValidity()

如果元素是約束驗證的候選者但未滿足其約束，則返回 false。在這種情況下，它還會向控制元件觸發一個可取消的 invalid 事件。如果該控制元件不是約束驗證的候選者，或者它滿足其約束，則返回 true。

reportValidity()

此方法向用戶報告元素上的約束問題（如果有）。如果存在問題，它會向元素觸發一個可取消的 invalid 事件，並返回 false；如果沒有問題，則返回 true。

select()

選擇控制元件中的內容。

setCustomValidity()

為元素設定自定義有效性訊息。如果此訊息不是空字串，則元素存在自定義有效性錯誤，並且不進行驗證。

setRangeText()

用新文字替換元素中的一段文字。

setSelectionRange()

選擇元素中的一段文字（但不會使其獲得焦點）。

事件

它還繼承了其父介面 HTMLElement 的事件。

使用 addEventListener() 或將事件監聽器分配給此介面的 oneventname 屬性來監聽這些事件

select 事件

當選擇了一些文字時觸發。

selectionchange 事件

當 <textarea> 元素中的文字選擇發生更改時觸發。

示例

自動生長文字區域示例

鍵入時使文字區域自動生長

JavaScript

js
function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

document.querySelector("textarea").addEventListener("keyup", (e) => {
  autoGrow(e.target);
});

CSS

css
textarea.no-scrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

html
<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="no-scrollbars"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

插入 HTML 標籤示例

在文字區域中插入一些 HTML 標籤

js
function insert(startTag, endTag) {
  const textArea = document.myForm.myTextArea;
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, start);
  const inserted = startTag + oldText.substring(start, end) + endTag;
  const suffix = oldText.substring(end);

  textArea.value = `${prefix}${inserted}${suffix}`;

  const newStart = start + startTag.length;
  const newEnd = end + startTag.length;

  textArea.setSelectionRange(newStart, newEnd);
  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTextArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("<code>", "</code>"));

將 span 裝飾成類似連結的行為

css
.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}
html
<form name="myForm">
  <p>
    [
    <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
    <span class="intLink" id="format-em"><em>Italic</em></span> |
    <span class="intLink" id="format-link">URL</span> |
    <span class="intLink" id="format-code">code</span> ]
  </p>

  <p>
    <textarea name="myTextArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. 
    </textarea>
  </p>
</form>

規範

規範
HTML
# htmltextareaelement

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題
© . Content available under a Creative Commons license.