HTMLTextAreaElement

HTMLTextAreaElementインターフェースが提供する特殊な属性及びメソッドを介して、<textarea>要素の割付けや見た目を好きに扱えるようになります。

プロパティ

form 読取専用 オブジェクト: 親フォーム要素への参照を返します。当該要素がフォーム要素配下にない場合、任意の <form> 要素の id 属性もしくは null 値になります。
type 読取専用 string: textarea という文字列を返します。
value string: コントロール内の生の値を返却または設定します。
textLength 読取専用 long: コントロールの value のコードポイント長を返します。 value.length 値を読むのと同じです。
defaultValue string: コントロールの既定値を返却または設定し、これは Node.textContent プロパティと同様に動作します。
placeholder string: 要素の placeholder 属性を返却または設定し、これは利用者がコントロールに入力するに当たっての助言が入ります。
rows unsigned long: 要素の rows 属性を返却または設定し、これはコントロールに表示できるテキストの行数を示します。
cols unsigned long: 要素の cols 属性を返却または設定し、これはテキストエリアの見える幅を示します。
autofocus boolean: 要素の autofocus 属性を返却または設定し、これはページ読み込み時にコントロールにフォーカスを当てるか否かを示します。
name string: 要素の name 属性を返却または設定し、これはコントロールの名称が入ります。
disabled boolean: 要素の disabled 属性を返却または設定し、これはコントロールが対話できるかどうかを示します。
HTMLTextAreaElement.labels読取専用 NodeList: この要素に関連付けられたラベル要素のリストを返します。
maxLength long: 要素の maxlength 属性を返却または設定し、これはユーザーが入力できる最大文字数を示します。この制約は値が変更されたときのみ評価されます。
minLength long: 要素の minlength 属性を返却または設定し、これはユーザーが入力できる最小文字数を表示します。この制約は値が変更されたときのみ評価されます。
accessKey string: 要素の accesskey 属性を返却または設定します。
readOnly boolean: 要素の readonly 属性を返却または設定し、これはユーザーがコントロールの値を変更できないことを示します。
required boolean: 要素の required 属性を返却または設定し、これはユーザーがフォームを送信する前に値を指定しなければならないことを示します。
tabIndex long: 現在の文書でタブキーを用いた移動順の中での要素の位置を返却または設定します。
selectionStart unsigned long: 選択中のテキストの開始位置を返却または設定します。テキストが選択されていない場合は、入力カーソルの次の文字の位置が入ります。値を設定すると、コントロールは setSelectionRange() がこの値を第1引数として、 selectionEnd を第2引数として呼び出されたかのように動作します。
selectionEnd unsigned long: 選択中のテキストの終了位置を返却または設定します。テキストが選択されていない場合は、入力カーソルの次の文字の位置が入ります。値を設定すると、コントロールは setSelectionRange() がこの値を第2引数として、 selectionStart を第1引数として呼び出されたかのように動作します。
selectionDirection string: 選択が行われた方向を返却または設定します。これは選択が現在のロケールで先頭から末尾の方向に行われた場合は "forward"、逆方向ならば "backward" です。方向が不明であれば "none" になることもあります。
validity 読取専用 ValidityState オブジェクト: この要素の検証の状態を返します。
willValidate 読取専用

boolean: この要素が制約検証の対象となるかどうかを返します。何か制約検証を妨げる条件があれば false となり、これには readOnly や disabled プロパティの値が true である場合も含みます。
validationMessage 読取専用 string: コントロールが満たさない制約検証を説明するローカライズされたメッセージを (もしあれば) 返します。これはコントロールが制約検証の対象でない場合 (willValidate が false の場合) や、制約を満たしている場合は空文字列です。
autocomplete
autocapitalize string: 要素がユーザーの入力を大文字化する動作を返却または設定します。有効な値は、 none, off, characters, words, sentences です。
inputMode
wrap string: HTML の wrap 属性を返却または設定し、これはコントロールでのテキストの折り返し方法を示します。

tabIndex と accessKey の2つのプロパティは、 HTML5 では HTMLElement から継承していますが、 DOM Level 2 HTML および早期の仕様書では HTMLTextAreaElement で定義されていました。

メソッド

blur() コントロールからフォーカスを外します。以降のキー入力はどこへも行きません。
focus() コントロールにフォーカスを与えます。続くキー入力はこの要素に入ります。
select() コントロールの内容を選択します。
setRangeText() 要素のテキストのある範囲を新しいテキストで置き換えます。
setSelectionRange() 要素のテキストのある範囲を選択します (ただし、フォーカスを与えません)。
checkValidity() この要素が制約検証の対象であり、制約を満たしていない場合は false を返します。この場合、キャンセル可能な invalid イベントもコントロール上に発生します。このコントロールが制約検証の対象でない場合や、制約を満たしている場合は true を返します。
reportValidity()

このメソッドは要素上の制約の問題がもしあれば、ユーザーに報告します。問題があれば、キャンセル可能な invalid イベントを発生させ、 false を返します。問題がなければ、 true を返します。
setCustomValidity(DOMstring) 要素に独自の検証メッセージを設定します。このメッセージが空文字列でない場合は、要素は独自の検証エラーに陥っており、検証が成功しません。

blur() と focus() の2つのメソッドは、 HTML5 以降は HTMLElement から継承していますが、 DOM Level 2 HTML および早期の仕様書では HTMLTextAreaElement で定義されていました。

イベント

これらのイベントを待ち受けするには addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

input イベント
<input>, <select>, <textarea> の各要素の value が変化したときに発生します。

例

自動拡張するテキストエリアの例

入力していくとテキストエリアが自動拡張するようにします。

JavaScript

function autoGrow (oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}

CSS

textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

<form>
  <fieldset>
    <legend>ご意見・ご感想</legend>
    <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="送信" /></p>
  </fieldset>
</form>

HTML タグを挿入する例

いくつかの HTML タグや、顔文字や、カスタムテキストをテキストエリアに挿入します。

JavaScript

function insertMetachars(sStartTag, sEndTag) {
  var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
  oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
  oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
  oMsgInput.focus();
}

CSS

内部の span をリンクのように動作させるよう装飾する CSS です。

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}

HTML:

<form name="myForm">
<p>[&nbsp;<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');"><strong>太字</strong></span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');"><em>斜体</em></span> | <span class="intLink" onclick="var newURL=prompt('リンクするURLを入力');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">コード</span> | <span class="intLink" onclick="insertMetachars(`(^_^)`);">笑顔</span> | 等々&nbsp;]</p>
<p><textarea name="myTxtArea" rows="10" cols="50">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</textarea></p>
</form>

長さと行数の制限の例

1行あたりの最大文字数と最大行数のあるテキストエリアを作成します。

最初に、テキストフィールドと入力時のキーイベントを取り、何れかの制限に達したかどうかを判断する関数を作成します。判断に達していなければ、そのキーを返します。

function checkRows(oField, oKeyEvent) {
  var nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode,

    // put here the maximum number of characters per line:
    nCols = 30,
    // put here the maximum number of lines:
    nRows = 5,

    nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
    sVal = oField.value, nLen = sVal.length,

    nBackward = nSelS >= nCols ? nSelS - nCols : 0,
    nDeltaForw = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nCols - 2) + "}\\n)")) + 1,
    nRowStart = nBackward + nDeltaForw,
    aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g),
    nRowEnd = nSelE + nRowStart + nCols - nSelS,
    sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
    bKeepCols = nKey === 13 || nLen + 1 < nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));

  return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
}

HTML では、この関数を `onkeypress` イベントでフックし、テキストエリアが貼り付けを受け付けないように設定します。

<form>
  <p>Textarea with fixed number of characters per line:<br />
    <textarea cols="50" rows="10" onkeypress="return checkRows(this, event);"
              onpaste="return false;"></textarea>
  </p>
</form>

仕様書

仕様書 状態 備考
HTML Living Standard
HTMLTextAreaElement の定義		 現行の標準
HTML5
HTMLTextAreaElement の定義		 勧告 tabindex と accesskey プロパティ、 blur() と focus() メソッドが HTMLElement で定義されるようになった。
autofocus, placeholder, dirName, wrap, maxLength, required, textLength, labels, selectionStart, selectionEnd, selectionDirection, validity, validationMessage, willValidate の各属性が追加された。
checkValidity(), setCustomValidity(), setSelectionRange() の各メソッドが追加された。
Document Object Model (DOM) Level 2 HTML Specification
HTMLTextAreaElement の定義		 廃止された defaultValue プロパティが value 属性の初期値ではなく、 <textarea> の内容の初期値が入るようになった。
Document Object Model (DOM) Level 1 Specification
HTMLTextAreaElement の定義		 廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HTMLTextAreaElementChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
autocapitalizeChrome 完全対応 43Edge 完全対応 79Firefox ? IE ? Opera ? Safari ? WebView Android 未対応 なしChrome Android 完全対応 43Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 4.0
autocompleteChrome 完全対応 66Edge 完全対応 ≤79Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 9.0
labelsChrome 完全対応 14Edge 完全対応 18Firefox 完全対応 56IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 56Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
reportValidityChrome 完全対応 40Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 27Safari 完全対応 10WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 64Opera Android 完全対応 27Safari iOS 完全対応 10Samsung Internet Android 完全対応 4.0
textLengthChrome 完全対応 47Edge 完全対応 17Firefox 完全対応 28IE 未対応 なしOpera 完全対応 30Safari 完全対応 9WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明