jQuery でテキストボックスの書き換え/取得/追記/削除を行う方法

2017/02/15

テキストボックス内の value 値を変更したり取得や削除を行う処理は、jQuery の中でも基本的な操作となります。今回は様々な処理パターンを例に挙げ、テキストボックスに対する操作を jQuery で実装する際のサンプルを紹介します。

サンプルプログラムでは具体的に id:hogehoge のテキストボックスに対する操作を例に説明します。

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

まずはテキストボックスへデータを設定する方法から。いきなりテキストボックスへ値が設定されても、きちんとプログラムで動いたものなのか判断できないので、サンプルではボタンをクリックしたらテキストボックスに値を設定するようにします。

jQuery による書き換え処理のサンプル

ボタンをクリックすると、テキストボックスへ値が設定されます。



.val() へテキストボックスに設定したい文字を引数として渡すことで、値の設定 (書き換え) が行われます。通常は固定文言をセットすることは無いので、定数ではなく変数を設定することが多いです。

テキストボックス内データの取得処理

こちらのサンプルもクリックしたらテキストボックスのデータを取得し、アラート表示するようにします。

jQuery による取得処理のサンプル



テキストボックスの値を変更してボタンをクリックすると、取得データが変わることが分かります。

テキストボックス内データの追記処理

前述の取得、書き換え処理を組み合わせれば、追記を行うのは簡単です。

jQuery による追記処理のサンプル



クリックした分だけ、何回でも追記することが可能です。ここでもしテキストボックスの値が数値で、かつ追記データの値も数値型の場合、上記サンプルコードの 8行目で数字同士の足し算が行われてしまいます。単純に文字列として結合するのであれば、String( $(“#hogehoge”).val() ) として文字型へキャストしておくと良いです。

テキストボックス内データの削除処理

削除と言うよりは、実際に空データを設定すると考えれば、これまでの流れから分かりますよね。そう、空データを設定すれば OK です。

jQuery による削除処理のサンプル



テキストボックスの操作は value 値の操作であるため、全て .val() で賄うことができます。大切な基本操作なので、まずはここから身につけるようにしましょう。

以上、jQuery でテキストボックスの書き換え/取得/追記/削除を行う方法でした。

PAGE TOP ↑