JavaScript textareaの中身は、innerHTMLではなくvalueを使う

このドキュメントの内容は、以下の通りです。

• はじめに
• JavaScriptでテキストエリアに値をセットするときのトラップ
• JavaScriptでテキストエリアに入力するための解決策
• テキストエリアの値を取得する方法
• JavaScriptに関する情報
• JavaScriptに関する書籍を探す

はじめに

ウェブページでは、HTMLやCSSのほかに、画面を動的に変更するといったことを実現するために、JavaScriptが利用されています。

ウェブページの複数行のテキストの入力欄は、テキストエリア(textarea)が利用されています。テキストエリアは、facebookやtwitterなどのSNSの投稿画面やブログや掲示板の入力画面などで使われていると思います。

JavaScriptでtextareaの中身を操作するときに、 はまってしまいました。たまに忘れてやってしまいます。

JavaScriptでテキストエリアに値をセットするときのトラップ

どのようなことにはまってしまったかというと、JavaScriptでtextareaの中身を見て、 文字列を入れたりする処理をするときに、innerHTMLにアクセスしてました。 確かに、JavaScriptで確認すると、値は入っているのですが、 画面に反映されていませんでした。

<form action="foo();return false;">
<textarea id="comment"></textarea><br>
<input type="submit" value="送信">
</form>

上記のフォームにテキストエリアがあるとします。上記のテキストエリアに、文字列を代入がしたくて、以下のコードを書きました。

<script type="text/javascript"><!--
var e = document.getElementById ('comment');
e.innerHTML = 'hoge';	// これは間違い
//--></script>

上記のコードの場合、innerHTMLに何を代入しても、textareaには、何も表示されません。

JavaScriptでテキストエリアに入力するための解決策

JavaScript で textareaに値を入力する場合には、innerHTMLではなく、valueにアクセスしなければなりません。

正しいコードは以下の通りです。

<script type="text/javascript"><!--
var e = document.getElementById ('comment');
e.value = 'hoge';	// 正しい
//--></script>

また、ひっかかってしまいそうな問題です。

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

テキストエリアの値を取得する方法についても紹介いたします。

たとえば、このようなテキストエリアがあったとします。

<textarea id="t1">
This is test.
This is TEST.
</textarea>

以下の JavaScript は、テキストエリアの値を取得して、コンソールに出力します。コンソールは、ウェブブラウザの開発ツールを開くことで確認できます。

<script type="text/javascript">
var t1 = document.getElementById("t1");
console.log(t1.value);
</script>

JavaScriptに関する情報

JavaScript に関する情報は /javascript/ にまとめています。

JavaScriptに関する書籍を探す

• JavaScript をアマゾンで探す
• JavaScript を楽天で探す
• JavaScript をヤフーショッピングで探す

---