「jQuery でテキストエリア内の文字はどのメソッドで取得する？」と、ちょっと疑問に思ったので実験した備忘録です。

jQuery では、指定した要素の中の文字列は「 .text() 」、指定した要素の中のHTML は「 .html() 」で取得できます。また、input 要素（ type="text" ）の value については「 .val() 」で取得できます。

さて、では textarea 要素の中の文字列については、上記のすべてのメソッドで取得できそうなのですが、実際のところどうなの？というのが今回の疑問です。

問題

ここにテキストエリアとボタンが一つずつあります。

テキストエリアの初期値は「かたつむりくん」です。ボタンをクリックすると、「 .text() 」「 .html() 」「 .val() 」の三つのメソッドでテキストエリア内の文字列を取得し、下の定義リストの項目名の下の「ここに表示」部分に、その項目名のメソッドで取得したテキストを表示するようになっています。

さて、次の二つの状況でボタンをクリックした場合、どちらの状況でもテキストエリア内の文字列が取得できるのはどのメソッドでしょうか？

  1. 初期値のままボタンをクリック
  2. テキストエリアの内容を書き変えてからボタンをクリック

.text()
ここに表示
.html()
ここに表示
.val()
ここに表示

答え

  1. 初期値のままボタンをクリックすると、どのメソッドでも取得できる。
  2. テキストエリアの内容を書き変えてからボタンをクリックすると、「 .val() 」でのみ取得できる。

よって、答えは「 .val() 」でした。

【2008-12-05 追記】

なお、Firefox、Google Chrome （たぶん Safari も）、Opera ではここにある結果どおりですが、IE6,7 では、書き変え後でもどのメソッドでも取得できてしまいます。

以上です。