path: root/files/ja/web/api/htmltextareaelement/index.html

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

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

<p>{{InheritanceDiagram(600,120)}}</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

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

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

<h2 id="Methods" name="Methods">メソッド</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>{{domxref("HTMLElement/blur", "blur()")}}</td>
   <td>コントロールからフォーカスを外します。以降のキー入力はどこへも行きません。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLElement/focus", "focus()")}}</td>
   <td>コントロールにフォーカスを与えます。続くキー入力はこの要素に入ります。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLInputElement/select", "select()")}}</td>
   <td>コントロールの内容を選択します。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLInputElement/setRangeText", "setRangeText()")}}</td>
   <td>要素のテキストのある範囲を新しいテキストで置き換えます。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLInputElement/setSelectionRange", "setSelectionRange()")}}</td>
   <td>要素のテキストのある範囲を選択します (ただし、フォーカスを与えません)。</td>
  </tr>
  <tr>
   <td><code>checkValidity()</code></td>
   <td>この要素が制約検証の対象であり、制約を満たしていない場合は <code>false</code> を返します。この場合、キャンセル可能な <code>invalid</code> イベントもコントロール上に発生します。このコントロールが制約検証の対象でない場合や、制約を満たしている場合は <code>true</code> を返します。</td>
  </tr>
  <tr>
   <td><code>reportValidity()</code></td>
   <td>
    <p>このメソッドは要素上の制約の問題がもしあれば、ユーザーに報告します。問題があれば、キャンセル可能な <code>invalid</code> イベントを発生させ、 <code>false</code> を返します。問題がなければ、 <code>true</code> を返します。</p>
   </td>
  </tr>
  <tr>
   <td><code>setCustomValidity(DOMstring)</code></td>
   <td>要素に独自の検証メッセージを設定します。このメッセージが空文字列でない場合は、要素は独自の検証エラーに陥っており、検証が成功しません。</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Events" name="Events">イベント</h2>

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

<dl>
 <dt>{{domxref("HTMLElement/input_event", "input")}} イベント</dt>
 <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の <code>value</code> が変化したときに発生します。</dd>
</dl>

<h2 id="Example" name="Example">例</h2>

<h3 id="Autogrowing_textarea_example" name="Autogrowing_textarea_example">自動拡張するテキストエリアの例</h3>

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

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">function autoGrow (oField) {
  if (oField.scrollHeight &gt; oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}</pre>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;ご意見・ご感想&lt;/legend&gt;
    &lt;p&gt;&lt;textarea class="noscrollbars" onkeyup="autoGrow(this);"&gt;&lt;/textarea&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="submit" value="送信" /&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>

<p>{{EmbedLiveSample('Autogrowing_textarea_example', 600, 300)}}</p>

<h3 id="Insert_HTML_tags_example" name="Insert_HTML_tags_example">HTML タグを挿入する例</h3>

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

<h4 id="JavaScript_2">JavaScript</h4>

<pre class="brush: js notranslate">function insertMetachars(sStartTag, sEndTag) {
  var bDouble = arguments.length &gt; 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();
}</pre>

<h4 id="CSS_2">CSS</h4>

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

<pre class="brush: css notranslate">.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}</pre>

<p>HTML:</p>

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

<p>{{EmbedLiveSample('Insert_HTML_tags_example', 600, 300)}}</p>

<h3 id="Maximum_length_and_number_of_lines_example" name="Maximum_length_and_number_of_lines_example">長さと行数の制限の例</h3>

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

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

<pre class="brush: js notranslate">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 &gt;= 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 &gt; nLen ? nLen : nRowEnd),
    bKeepCols = nKey === 13 || nLen + 1 &lt; nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw &gt; 0 || nKey &gt; 0) &amp;&amp; (sRow.length &lt; nCols || (nKey &gt; 0 &amp;&amp; (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));

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

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

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

<p>{{EmbedLiveSample('Maximum_length_and_number_of_lines_example', 600, 300)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.HTMLTextAreaElement")}}</p>