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 (en-US)読取専用	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 タグや、顔文字や、カスタムテキストをテキストエリアに挿入します。

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>