スポンサーリンク

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

はじめに

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

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

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

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に関する書籍を探す




スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー