HTML DOM textarea オブジェクト：テキスト入力領域を簡単にマスター

HTML DOM textarea オブジェクト

**説明:** HTML DOM の textarea オブジェクトについて詳しく解説し、JavaScript を使用してテキスト領域の値の取得と設定、テキスト領域の属性の制御、関連イベントの処理方法を学びます。

---

1. textarea オブジェクトとは？

textarea オブジェクトは、HTML の <textarea> 要素を表し、ユーザーが複数行のテキストを入力できる領域を作成するために使用されます。
document.getElementById() または他の DOM メソッドを使用して、textarea オブジェクトを取得できます。

2. textarea オブジェクトのプロパティ

プロパティ	説明	例
`value`	textarea 内のテキストコンテンツを取得または設定します。	textarea 値の取得: `const text = textareaElement.value;` textarea 値の設定: `textareaElement.value = "新しいテキスト";`
`disabled`	textarea を無効にするかどうかを設定します。	textarea の無効化: `textareaElement.disabled = true;` textarea の有効化: `textareaElement.disabled = false;`
`readOnly`	textarea を読み取り専用にするかどうかを設定します。	読み取り専用に設定: `textareaElement.readOnly = true;` 読み取り専用を解除: `textareaElement.readOnly = false;`
`rows`	textarea の表示行数を設定します。	行数の設定: `textareaElement.rows = 5;`
`cols`	textarea の表示列数を設定します。	列数の設定: `textareaElement.cols = 30;`
`placeholder`	textarea のプレースホルダーテキストを設定します。	プレースホルダーテキストの設定: `textareaElement.placeholder = "ここにテキストを入力...";`

3. textarea オブジェクトのイベント

イベント	説明	例
`input`	textarea の値が変更されたときに発生します。	input イベントのリッスン: `textareaElement.addEventListener('input', (event) => { ... });`
`focus`	textarea がフォーカスを取得したときに発生します。	focus イベントのリッスン: `textareaElement.addEventListener('focus', (event) => { ... });`
`blur`	textarea がフォーカスを失ったときに発生します。	blur イベントのリッスン: `textareaElement.addEventListener('blur', (event) => { ... });`

4. textarea テキストの操作

**選択されたテキストの取得**: textareaElement.selectionStart および textareaElement.selectionEnd を使用して、選択範囲の開始位置と終了位置を取得し、value プロパティから切り取ります。
**選択されたテキストの設定**: textareaElement.setSelectionRange(start, end) メソッドを使用して、指定した範囲内のテキストを選択します。
**テキストの挿入**: value プロパティを操作して、指定した位置にテキストコンテンツを挿入します。

5. textarea オブジェクトの適用シナリオ

**フォームの送信**: 掲示板、コメント欄など、ユーザーからの複数行のテキスト入力を収集します。
**リッチテキストエディタ**: JavaScript と組み合わせて、より複雑なテキスト編集機能を実現します。
**コードエディタ**: コードの強調表示、自動補完などの機能を提供します。

この記事を通して、HTML DOM textarea オブジェクトについてより深く理解し、実際のプロジェクトで柔軟に活用できるようになっているはずです。

HTML コード例:


  <textarea id="myTextarea" rows="10" cols="50" placeholder="ここにテキストを入力してください..."></textarea>

JavaScript コード例:


  // textarea 要素を取得
  const textarea = document.getElementById("myTextarea");

  // 値を取得
  const text = textarea.value;

  // 値を設定
  textarea.value = "新しいテキスト";

  // input イベントリスナーを追加
  textarea.addEventListener('input', (event) => {
    console.log("テキストが変更されました:", event.target.value);
  });

参考資料:

textarea - HTML: HyperText Markup Language | MDN

Q&A

Q1: textarea の最大文字数を制限するにはどうすればよいですか？

A1: JavaScript を使用して、input イベントで入力されたテキストの長さをチェックし、制限を超えた場合はそれ以上の入力を防ぐことができます。

Q2: textarea 内で特定の単語を強調表示するにはどうすればよいですか？

A2: JavaScript と正規表現を使用して、textarea の値を検索し、一致する単語を HTML の <mark> タグで囲むことで強調表示できます。

Q3: textarea のサイズを動的に変更するにはどうすればよいですか？

A3: JavaScript を使用して、input イベントで入力されたテキストの高さに応じて、textarea の rows プロパティを動的に調整できます。