テキストエリアについて（HTMLTextAreaElement）
テキストエリアについて
■テキストエリアについて
テキストエリアは、コントロール要素の一種です。
ユーザーが、複数行のテキスト入力可能な、コントロールを設置できます。
テキストエリアは、<TEXTAREA> 要素です。
<TEXTAREA> タグを使用して、テキストエリアを表示する
<form>
<textarea rows="3" >私は値です</textarea>
</form>
サンプル表示
テキストエリアを作成する
■テキストエリア要素を動的に作成する
■HTMLTextAreaElement オブジェクトを作成する
document.createElement() メソッドを使用します。
引数に、"textarea" を指定します。
動的に HTMLTextAreaElement オブジェクトを作成する
// HTMLTextAreaElement オブジェクトを作成する
var element = document.createElement("textarea");
// 出力テスト
console.log(element);
■テキストエリア要素をブラウザに表示する
HTMLTextAreaElement オブジェクトを、任意のノードリストに登録します。
テキストエリアを動的に作成して、ブラウザに表示する
// HTMLTextAreaElement オブジェクトを作成する
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
■静的な <TEXTAREA> タグから、HTMLTextAreaElement オブジェクトを取得する
要素を取得する方法については、こちらで解説しています。
静的な <TEXTAREA> タグから、HTMLTextAreaElement オブジェクトを取得する
<html>
<body>
<form>
<textarea id="aaa" ></textarea>
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var textarea = document.getElementById("aaa");
// 出力テスト
console.log(textarea);
//-->
</script>
</body>
</html>
テキストエリアを設定する
■テキストエリアを設定する
■プロパティ一覧（一部抜粋）
| プロパティ名 | 型 | 説明 |
| disabled | Boolean | テキストエリアを無効状態に設定する |
| readOnly | Boolean | テキストエリアを読取専用に設定する |
| cols | Number | テキストエリアの幅を設定する（文字数指定） |
| rows | Number | テキストエリアの高さを設定する（文字数指定） |
| maxLength | Number | 入力可能な最大文字数を設定する |
| プロパティ名 | 型 | 説明 |
| name | String | 名前を設定する |
| dirName | String | 名前を設定する（FORM送信時にテキスト方向情報のクエリ付加） |
| value | String | 値を設定する（テキストの編集） |
| defaultValue | String | FORMリセット時の初期値を設定する |
| wrap | String | デフォルトは "soft"。 FORM送信時に折り返し位置に改行コードを挿入するなら "hard" |
| placeholder | String | 未記入時の代替文字列を設定する |
| autofocus | Boolean | 初期フォーカスの有無を設定する（DOM構築が完了した瞬間） |
| required | Boolean | 入力必須の有無を設定する |
| willValidate | Boolean | バリデートの有無を設定する |
| validationMessage | String | バリデートのエラーメッセージを設定する |
■テキストエリアを無効状態に設定する
disabled プロパティを使用します。
true をセットすると、無効状態となります。
■無効状態について
テキストエリアに書き込み入力する事はできません。
テキストを選択したり、コピーする事はできません。
ブラウザによっては、読取可能です。
■使用例
テキストエリアを無効状態に設定する
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "あいうえおかきくけこ";
// ------------------------------------------------------------
// テキストエリアを無効状態に設定する
// ------------------------------------------------------------
textarea.disabled = true;
■テキストエリアを読取専用に設定する
readOnly プロパティを使用します。
true をセットすると、読取専用となります。
■読取専用状態について
テキストエリアに書き込み入力する事はできません。
テキストを選択したり、コピーする事は可能です。
■使用例
テキストエリアを読取専用に設定する
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "あいうえおかきくけこ";
// ------------------------------------------------------------
// テキストエリアを読取専用に設定する
// ------------------------------------------------------------
textarea.readOnly = true;
■テキストエリアの幅を設定する（文字数指定）
cols プロパティを使用します。
cols の 1 は、半角文字１つ分に相当します。
縦スクロールバーを配置するための空間も、確保されます。
デフォルト値は、20 です。
フォントの種類や太さを変更した場合、正確ではありません。
■使用例
テキストエリアの幅を設定する（文字数指定）
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// インラインスタイルを設定する
// ------------------------------------------------------------
textarea.style.cssText = "font-size:64px;";
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "1234567890\n||||||||||\nあいうえお";
// ------------------------------------------------------------
// テキストエリアの幅を設定する（文字数指定）
// ------------------------------------------------------------
textarea.cols = 10;
■テキストエリアの高さを設定する（文字数指定）
rows プロパティを使用します。
横スクロールバーを配置するための空間は、確保されません。
ブラウザによっては、確保されます。
デフォルト値は、2 です。
■使用例
テキストエリアの高さを設定する（文字数指定）
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// インラインスタイルを設定する
// ------------------------------------------------------------
textarea.style.cssText = "font-size:64px;";
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "1234567890\n||||||||||\nあいうえお";
// ------------------------------------------------------------
// テキストエリアのサイズを設定する
// ------------------------------------------------------------
// 幅を設定（半角文字数指定）
textarea.cols = 10;
// 高さを設定（文字数指定）
textarea.rows = 3;
■入力可能な最大文字数を設定する
maxLength プロパティを使用します。
デフォルト値は、-1 です。
-1 の場合、文字数制限はありません。
■使用例
入力可能な最大文字数を設定する
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "12345";
// ------------------------------------------------------------
// 入力可能な最大文字数を設定する
// ------------------------------------------------------------
textarea.maxLength = 5;
テキストを編集する
■テキストを編集する
■テキストエリア内のテキストを編集する
value プロパティを使用します。
■テキストの総文字数を取得する
textLength プロパティを使用します。
■使用例
テキストエリア内のテキストを設定する
// ------------------------------------------------------------
// HTMLTextAreaElement オブジェクトを作成する
// ------------------------------------------------------------
var textarea = document.createElement("textarea");
// BODY のノードリストに登録する
document.body.appendChild(textarea);
// ------------------------------------------------------------
// テキストエリア内のテキストを設定する
// ------------------------------------------------------------
textarea.value = "表示テスト";
■テキストが変化したか監視する
onchange イベントを使用します。
テキストエリアから、フォーカスが外れる直前に発行されます。
ユーザー入力によって変化した場合に限って、発行されます。
最終的にテキストが同一であった場合、発行されません。
テキスト編集中に発行される事はありません。
テキストエリアにフォーカスが当たっている必要があります。
例えば、Drag and Drop によるテキスト入力は、取りこぼします。
テキストが変化したか監視する（フォーカスが外れる直前）
<html>
<body>
<textarea id="aaa" rows="5" style="width:400px;" ></textarea> <br>
<input type="button" value="テスト" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// テキストが変化すると実行されるイベント（フォーカスが外れる直前）
// ------------------------------------------------------------
textarea.onchange = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( textarea.value );
console.log( textarea.textLength );
};
//-->
</script>
</body>
</html>
■テキストが編集された直後か監視する
■テキストが編集されたか監視する（Events Level3）
oninput イベントを使用します。
ユーザー入力を、取りこぼしなく検出できます。
例えば、IME によるテキスト入力も検出できます。
テキストが編集されたか監視する
<html>
<body>
<textarea id="aaa" rows="5" style="width:400px;" ></textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// テキストが編集されると実行されるイベント
// ------------------------------------------------------------
textarea.oninput = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( textarea.value );
console.log( textarea.textLength );
};
//-->
</script>
</body>
</html>
■テキストが編集される直前か監視する
■キーボード入力される直前か監視する
onkeypress イベントを使用します。
半角入力のみ検出できます。
例えば、IME によるテキスト入力は、検出できません。
例えば、コピーアンドペーストを使った入力は、検出できません。
キーボード入力される直前か監視する
<html>
<body>
<textarea id="aaa" rows="5" style="width:400px;" ></textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// キーボード入力される直前に実行されるイベント
// ------------------------------------------------------------
textarea.onkeypress = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( e );
console.log( e.keyCode );
// ------------------------------------------------------------
// テキスト編集を阻止する
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトの動作を無効化する
e.preventDefault();
}else{
// デフォルトの動作を無効化する（非標準）
return false;
}
};
//-->
</script>
</body>
</html>
■テキストが編集される直前か監視する（Events Level3）
onbeforeinput イベントを使用します。
対応しているブラウザはありません。
テキストを選択する
■すべてのテキストを選択する
select() メソッドを使用します。
すべてのテキストが選択された状態に変化します。
HTMLTextAreaElement.select( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
すべてのテキストを選択する
<html>
<body>
<textarea id="aaa" rows="4" style="width:400px;" >あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// 1 秒後に実行される関数
// ------------------------------------------------------------
setTimeout(function(){
// すべてのテキストを選択する
textarea.select();
} , (1000 * 1) );
//-->
</script>
</body>
</html>
■一部のテキストを選択する（プロパティ指定）
■プロパティ一覧
| プロパティ名 | 型 | 説明 |
| selectionStart | Number | テキスト選択の開始位置を設定する（0～） |
| selectionEnd | Number | テキスト選択の終了位置を設定する（0～） |
| selectionDirection | String | テキスト選択の向きを設定する |
■設定例
一部のテキストを選択する（プロパティ指定）
<html>
<body>
<textarea id="aaa" rows="3" style="width:400px;" >あいうえおかきくけこ
さしすせそたちつてと</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// 1 秒後に実行される関数
// ------------------------------------------------------------
setTimeout(function(){
// ------------------------------------------------------------
// 一部のテキストを選択する（プロパティ指定）
// ------------------------------------------------------------
// テキスト選択の開始位置を設定する
textarea.selectionStart = 3;
// テキスト選択の終了位置を設定する
textarea.selectionEnd = 8;
// テキスト選択の向きを設定する
textarea.selectionDirection = "forward";
} , (1000 * 1) );
//-->
</script>
</body>
</html>
■ selectionStart プロパティ
テキスト選択の開始位置を設定します。
0 から始まる値を指定します。
■ selectionEnd プロパティ
テキスト選択の終了位置を設定します。
0 から始まる値を指定します。
ここで指定した位置自身は、選択対象に含まれません。
selectionStart プロパティよりも、小さい値を指定する事はできません。
■ selectionDirection プロパティ
テキスト選択の向きを設定します。
指定可能な文字列は、以下の通りです。
| 文字列 | 説明 |
| "forward" | 頭から開始して、尾までを選択 |
| "backward" | 尾から開始して、頭までを選択（逆順） |
■一部のテキストを選択する（メソッド指定）
setSelectionRange() メソッドを使用します。
一部のテキストが選択された状態に変化します。
HTMLTextAreaElement.setSelectionRange( start , end , direction ) :Void
| 第01引数 | Number | selectionStart プロパティと同等 |
| 第02引数 | Number | selectionEnd プロパティと同等 |
| 第03引数(略可) | String | selectionDirection プロパティと同等 |
| 戻り値 | Void | なし。 |
一部のテキストを選択する（メソッド指定）
<html>
<body>
<textarea id="aaa" rows="3" style="width:400px;" >あいうえおかきくけこ
さしすせそたちつてと</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// 1 秒後に実行される関数
// ------------------------------------------------------------
setTimeout(function(){
// ------------------------------------------------------------
// 一部のテキストを選択する
// ------------------------------------------------------------
textarea.setSelectionRange( 3 , 8 , "forward" );
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( textarea.selectionStart ); // 3
console.log( textarea.selectionEnd ); // 8
console.log( textarea.selectionDirection ); // "forward"
} , (1000 * 1) );
//-->
</script>
</body>
</html>
■テキストの選択状態が変化したか監視する
onselect イベントを使用します。
テキストの選択状態が完了すると、発行されます。
テキストの選択状態が解除された場合には、発行されません。
テキストの選択状態が変化したか監視する
<html>
<body>
<textarea id="aaa" rows="3" style="width:400px;" >あいうえおかきくけこ
さしすせそたちつてと</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
// ------------------------------------------------------------
// テキストの選択が完了すると実行されるイベント
// ------------------------------------------------------------
textarea.onselect = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( e );
console.log( textarea.selectionStart );
console.log( textarea.selectionEnd );
console.log( textarea.selectionDirection );
};
//-->
</script>
</body>
</html>