読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

JavaScriptの動かないコード(初級編)textareaの内容を読み書きする方法は,innerHTMLとvalueのどちらか?

javascript 動かないコード


以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)


やりたい事:

  • テキストエリアに入力されている文字列をアラート表示する。
<!-- 入力用のボックス -->
<textarea id="hoge">ここの文字列を書きかえてください。</textarea>

<!-- ボタン -->
<input type="button" value="入力内容を確認" onclick="f()">


<script>

function f(){
	// textareaを取得
	var elem = document.getElementById("hoge");
	
	alert( "入力された文字:" + elem.innerHTML );
}

</script>

発生する問題

そのままボタンを押すと,テキストエリア内の文字列がちゃんと表示される。


しかし,テキストエリア内の文字列を編集してからボタンを押しても,編集前の内容が表示されてしまう。

見かけの変更が,DOM構造に反映されていないような振る舞いをするのだ。


DOMで,textarea内の文字列に正しくアクセスできていない。

原因と解決策

ブラウザの画面上で,textareaに手入力した内容は,

innerHTMLではなくvalueに反映される。


なので .valueでアクセスすれば正しく読み書きできる。


innerHTMLを使おうとすると,
一見ちゃんと動いているように見えて実はちゃんと読み書きできていない,
というトラブルが多発し,クロスブラウザな挙動も期待できなくなる。

textareaにinnerHTMLは禁物だ。

.innerHTML vs. value in textarea / Articles / dracoblue.net
http://dracoblue.net/dev/innerhtml-vs...

  • innerHTML of an html-object like textarea may not be changed if you edited the objects content manually.


JavaScript textareaの中身は、innerHTMLではなくvalueを使う
http://kaworu.jpn.org/kaworu/2008-04-...

  • textareaは、innerHTMLではなく、valueにアクセスしなければなりません。


JavaScript : TEXTAREA への値代入 : typeOf 'aki_mana'
http://blog.livedoor.jp/aki_mana/arch...

  • TEXTAREAを対象にしたエディタを実装する場合はvalue を利用する方向で。

関連する記事:

JavaScriptの動かないコード (中級編) innerHTMLを追記するとイベントハンドラが消える
http://language-and-engineering.hatenablog.jp/entry/20090903/p1


JavaScriptの動かないコード (中級編) innerHTMLに閉じタグを書き込む時のエラー
http://language-and-engineering.hatenablog.jp/entry/20081005/1223135603


JavaScriptの動かないコード (中級編) p要素への appendChild() で失敗する
http://language-and-engineering.hatenablog.jp/entry/20080831/1220189470


JavaScriptの動かないコード (中級編) 不要なイベントが連鎖で発生してしまう  (バブリングの対処)
http://language-and-engineering.hatenablog.jp/entry/20081128/1227843561