DOM

：

インターフェイス

：

HTMLTextAreaElement インターフェイス

　編集：2022.03.08 by T.A.

→MS

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

プロパティ

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

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

メソッド

HTMLTextAreaElement.blur(): コントロールからフォーカスを外します。以降のキー入力はどこへも行きません。
HTMLTextAreaElement.focus(): コントロールにフォーカスを与えます。続くキー入力はこの要素に入ります。
HTMLTextAreaElement.select(): コントロールの内容を選択します。
HTMLTextAreaElement.setRangeText(): 要素のテキストのある範囲を新しいテキストで置き換えます。
HTMLTextAreaElement.setSelectionRange(): 要素のテキストのある範囲を選択します（ただし、フォーカスを与えません）。
HTMLTextAreaElement.checkValidity(): この要素が制約検証の対象であり、制約を満たしていない場合は false を返します。この場合、キャンセル可能な invalid イベントもコントロール上に発生します。このコントロールが制約検証の対象でない場合や、制約を満たしている場合は true を返します。
HTMLTextAreaElement.reportValidity(): このメソッドは要素上の制約の問題がもしあれば、ユーザーに報告します。問題があれば、キャンセル可能な invalid イベントを発生させ、false を返します。問題がなければ、true を返します。
HTMLTextAreaElement.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>

¶例省く

テスト

ここに表示

スクリプト： D=IdTest.textLength

スクリプト：

表示内容：