【ワテ備忘録】textArea, input textのテキスト設定・取得はtext()かval()か?

この記事は約4分で読めます。
スポンサーリンク

jQueryを使って、

textArea

input text

にセットされている文字列を取得したい場合に、

text()

val()

のどっちの関数を使えば良いのか良く迷う。

 

例えば以下のような例だ。

<body>
    <script>
        window.onload = function () {
 
            var inputText = $('<input type="text" />');
            var textArea = $('<textarea />');
            $('body').append(inputText);
            $('body').append(textArea);
 
            inputText.val('inputTextの初期値');
            textArea.val('textAreaの初期値');
 
            var text1 = $('body > input[type="text"]').val();
            var text2 = $('body > input[type="text"]').text();//空文字列
            var area1 = $('body > textarea').val();
            var area2 = $('body > textarea').text(); //でも良い
            var CRLF = '\r\n';
            var msg = 'text1 val() =' + text1 + CRLF
                    + 'text2 text()=' + text2 + CRLF
                    + 'area1 val() =' + area1 + CRLF
                    + 'area2 text()=' + area2 + CRLF
            ;
            alert(msg);
        };
    </script>
</body>

 

まず、二つの要素をbodyに追加する。

            var inputText = $('<input type="text" />');
            var textArea = $('<textarea />');
            $('body').append(inputText);
            $('body').append(textArea);

 

追加した要素に初期値を与える

            inputText.val('inputTextの初期値');
            textArea.val('textAreaの初期値');

値をセットする場合はval()で行う。

ここでセットした値がそれぞれの要素に表示される。

 

一方、値を取得する場合も、val()で行うと良い。

            var text1 = $('body > input[type="text"]').val();
            var area1 = $('body > textarea').val();

これで正常に値を取得出来た。

一方、text()メソッドを使うと、

            var text2 = $('body > input[type="text"]').text();//空文字列
            var area2 = $('body > textarea').text(); //でも良い

textAreaのほうは同じく正常に値を取得出来たが、input textのほうは空文字列が返ってきた。

 

なので、結論としては、textArea, input textのどちらの場合も値の設定・取得には

val()

を使えば十分。

 

本を読む

アマゾンのランキングが高いので、良い本なのかもしれない。

本日現在では、Kindle版だと450円だ。

安いな。272ページもあるのに。

ワテはまだ読んでいない。

 

 

 

Web開発本の売れ筋ランキングを見る。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

jQuery
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント