jQueryでのテキストボックスの値の取得と書き換えの方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのテキストボックスの値の取得と書き換えの方法について、簡単に解説していきます。

テキストボックスの値の取得

jQueryではテキストボックスの値の操作が簡単です。

具体的には、valメソッドを使うことで値を操作できます。

$("#hoge").val();

上記のコードでは、hogeのidのテキストボックスの値を取得しています。

テキストボックスの値の書き換え

valメソッドでテキストボックスの値の書き換えも可能です。

書き換えの場合には、valメソッドの引数に書き換え後の文字列を指定します。

$("#hoge").val('ほげ書き換え');

上記の例では、hogeというidを持つテキストボックスの値を書き換えています。

textareaについて

textarea要素とinput要素は構造が異なります。

<textarea id="hoge"></textarea>

上記のように、textarea要素への入力内容はvalue属性の値にはなりません。

$("#hoge").text();
$("#hoge").text('ほげ書き換え');

しかし、jQueryでは、入力内容をvalメソッドで操作ができるうえ、textメソッドでも操作可能です。