--- title: HTMLTextAreaElement slug: Web/API/HTMLTextAreaElement tags: - API - HTML DOM - HTMLTextAreaElement - Reference - インターフェイス - リファレンス translation_of: Web/API/HTMLTextAreaElement ---
{{APIRef("HTML DOM")}}

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

{{InheritanceDiagram(600,120)}}

プロパティ

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

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

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

メソッド

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

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

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

イベント

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

{{domxref("HTMLElement/input_event", "input")}} イベント
{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("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>

{{EmbedLiveSample('Autogrowing_textarea_example', 600, 300)}}

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>

{{EmbedLiveSample('Insert_HTML_tags_example', 600, 300)}}

長さと行数の制限の例

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>

{{EmbedLiveSample('Maximum_length_and_number_of_lines_example', 600, 300)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', "#htmltextareaelement", "HTMLTextAreaElement")}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-textarea-element", "HTMLTextAreaElement")}} {{Spec2('HTML5 W3C')}} tabindex と accesskey プロパティ、 blur() と focus() メソッドが {{domxref("HTMLElement")}} で定義されるようになった。
autofocus, placeholder, dirName, wrap, maxLength, required, textLength, labels, selectionStart, selectionEnd, selectionDirection, validity, validationMessage, willValidate の各属性が追加された。
checkValidity(), setCustomValidity(), setSelectionRange() の各メソッドが追加された。
{{SpecName('DOM2 HTML', 'html.html#ID-ID-24874179', 'HTMLTextAreaElement')}} {{Spec2('DOM2 HTML')}} defaultValue プロパティが value 属性の初期値ではなく、 {{HTMLElement("textarea")}} の内容の初期値が入るようになった。
{{SpecName('DOM1', 'level-one-html.html#ID-24874179', 'HTMLTextAreaElement')}} {{Spec2('DOM1')}} 初回定義

ブラウザーの互換性

{{Compat("api.HTMLTextAreaElement")}}