【JavaScript】テキストエリアの値を取得・設定する（textarea）

テキストエリアの値を取得する

テキストエリアの値を取得する時は、textareaのvalueプロパティから取得します。

（以下のサンプルコードでは、HTML側でテキストが入力されている状態にしています。）

<!-- HTML -->
<textarea name="sample">サンプルテキスト</textarea>

// JavaScript
const textarea = document.querySelector('textarea[name="sample"]');
console.log(textarea.value); // 'サンプルテキスト'

テキストエリアの値を設定する

テキストエリアの値を設定する時は、textareaのvalueプロパティに設定したい値を代入します。

<!-- HTML -->
<textarea name="sample"></textarea>

// JavaScript
const textarea = document.querySelector('textarea[name="sample"]');
textarea.value = 'テキストエリアに値を設定します。';

console.log(textarea);
// <textarea name="sample">テキストエリアに値を設定します。</textarea>

テキストエリアの値が変更されたときに値を取得する

テキストエリアの値が変更されたときに値を取得するには、changeイベントを使います。

<!-- HTML -->
<textarea name="change"></textarea>
<p>テキストエリアの値：　<span id="target"></span></p>

// JavaScript
const textarea = document.querySelector('textarea[name="sample"]');
const target = document.querySelector('#target');
textarea.addEventListener('change', (event) => {
  const value = event.target.value;
  target.textContent = value;
});

下のテキストエリアに値を入力した後にフォーカスを外すと、changeイベントにトリガーしてテキストエリアから値を取得して表示します。

テキストエリアの値：