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 読取専用 |
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 読取専用 |
この要素の検証の状態を返します。 |
willValidate 読取専用 |
|
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() |
このメソッドは要素上の制約の問題がもしあれば、ユーザーに報告します。問題があれば、キャンセル可能な |
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 タグを挿入する例
いくつかの 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>[ <span class="intLink" onclick="insertMetachars('<strong>','<\/strong>');"><strong>太字</strong></span> | <span class="intLink" onclick="insertMetachars('<em>','<\/em>');"><em>斜体</em></span> | <span class="intLink" onclick="var newURL=prompt('リンクするURLを入力');if(newURL){insertMetachars('<a href=\u0022'+newURL+'\u0022>','<\/a>');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n<code>\n','\n<\/code>\n');">コード</span> | <span class="intLink" onclick="insertMetachars(`(^_^)`);">笑顔</span> | 等々 ]</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>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard HTMLTextAreaElement の定義 |
現行の標準 | |
HTML5 HTMLTextAreaElement の定義 |
勧告 | tabindex と accesskey プロパティ、 blur() と focus() メソッドが HTMLElement で定義されるようになった。autofocus , placeholder , dirName , wrap , maxLength , required , textLength , labels , selectionStart , selectionEnd , selectionDirection , validity , validationMessage , willValidate の各属性が追加された。checkValidity() , setCustomValidity() , setSelectionRange() の各メソッドが追加された。 |
Document Object Model (DOM) Level 2 HTML Specification HTMLTextAreaElement の定義 |
廃止された | defaultValue プロパティが value 属性の初期値ではなく、 <textarea> の内容の初期値が入るようになった。 |
Document Object Model (DOM) Level 1 Specification HTMLTextAreaElement の定義 |
廃止された | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser