HTMLTextAreaElement
===================

**`HTMLTextAreaElement`** インターフェイスは、 `<textarea>` 要素のレイアウトや表示を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLTextAreaElementインスタンスプロパティ
-----------

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

`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 つのメソッドは、`HTMLElement` から継承しています。

イベント
----

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

`input` イベント

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

`selectionchange` イベント 
Experimental

`<textarea>` 要素のテキスト選択範囲が変更されたときに発行されます。

例
-

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

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

#### JavaScript


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


#### CSS


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


#### HTML


```html
<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>
```

### HTML タグを挿入する例

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

#### JavaScript


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

  const prefix = oldText.substring(0, selectionStart);
  const inserted =
    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
  const suffix = oldText.substring(selectionEnd);
  textArea.value = `${prefix}${inserted}${suffix}`;

  const newSelectionStart = selectionStart + startTag.length;
  const newSelectionEnd = selectionEnd + startTag.length;
  textArea.setSelectionRange(newSelectionStart, newSelectionEnd);

  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTxtArea.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("\n<code>\n", "\n</code>\n"));
```


#### CSS

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


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


HTML:


```html
<form name="myForm">
  <p>
    [&nbsp;
    <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> &nbsp;]
  </p>

  <p>
    <textarea name="myTxtArea" 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. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
    </textarea>
  </p>
</form>
```

### 長さと行数の制限の例

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

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


```js
function checkRows(oField, oKeyEvent) {
  let nKey = (
      oKeyEvent ||
      /\* old IE \*/ window.event || /\* check is not supported! \*/ { keyCode: 38 }
    ).keyCode,
    // 行の最大文字数をここに入力
    nCols = 30,
    // 最大行数をここに入力
    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` イベントでフックし、テキストエリアが貼り付けを受け付けないように設定します。


```html
<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>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltextareaelement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.