textareaの内容は$(‘textarea’).val()で扱う

先日jQueryを使ってtextareaの内容を取得して何かしらの操作をする処理を作っていてハマったんで、ちょっとばかし調べてみました。

textarea要素はinput要素と違い、開始タグと終了タグの間に値を記述するんで、それを真に受けて

var value = $('textarea').html()

として動かしてみるとtextareaの初期値、要はページ表示状態でのtextareaの内容は取得できるんですけど、textareaの内容を書き換えるとfirefox3.6では変更後の値が取得できません。

• jQuery でテキストエリア内の文字はどのメソッドで取得する？
• なぜ$(‘textarea’).attr(‘value’)で値が取れるのか

にもあるように$('textarea').val()で扱うんだそうです。後者の記事に中に書かれているデータはこのelement.valueを読み書きしてねとDOMの仕様にはあります。と書かれていたのでW3CのDOM Level 2の仕様を読み返してみたら確かにそれっぽいことが書いてありました。

せっかくなので実際に試してみます。

コードは以下の通り。

<form action="#" method="get" style="margin: 2em;">
     <div>
          <textarea id="js409Message" rows="5" cols="50">何か書き換えてみる。</textarea>
     </div>
    <div>
          <input
               type="button"
               value=".valueでtextareaの内容を取得"
               onclick="javascript:alert(document.getElementById('js409Message').value);"
     />
     </div>
</form>

あ、本当だ。document.getElementById('message').valueでtextareaの内容が取得できる!