jQuery でテキストボックスの値を設定／取得／追記／削除を行う方法

jQuery でのテキストボックスに対する操作をまとめました。

テキストボックスの value 値に対する操作は、jQuery の中でも基本的な処理になります。ベースとなるテキストボックスの操作を覚えれば、各種フォームオブジェクトに対する操作も難なく覚えることができます。

以下、サンプルプログラムでは id 属性「sampletext」のテキストボックスを用いて解説していきます。

<input type="text" id="sampletext" value="テスト">

テキストボックスに値を設定する処理

まずはテキストボックスにデータを設定する方法です。

$(function () {
  $("#testButton").click( function() {
    // テキストボックスへ値を設定します
    $("#sampletext").val("値を設定します！");
  });
});

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

jQuery による値設定のサンプル

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

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

$(function () {
  $("#testButton").click( function() {
    // テキストボックスのデータを取得します
    var getData = $("#sampletext").val();
    // 取得値をメッセージで表示します
    alert( getData );
  });
})

.val() を引数なしで呼び出すと、要素の value 値を取得できます。

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

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

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

データの取得処理と設定処理を組み合わせれば、テキストを追記することができます。

$(function () {
  $("#testButton").click( function() {
    // 追記するデータを定義しておきます
    var addText = "★追記データ";
    // テキストボックスのデータを取得します
    var getData = String($("#sampletext").val());
    // 取得データと追記文言をくっつけて出力します
    $("#sampletext").val( getData + addText );
  });
});

６行目の処理で String() で文字型へキャストしているのは、テキスト内のデータが数字だった場合、８行目の処理で数字同士の足し算として行われるのを避けるためです。

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

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

クリックした分だけ、何回でも追記することが可能です。

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

プログラムとしては削除ではなく、空データを設定する処理になります。

$(function () {
  $("#testButton").click( function() {
    // テキストボックスのデータを空にします
    $("#sampletext").val("");
  });
});

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

値を入力してボタンをクリックすると、テキストボックスが空になります。

テキストボックスの操作は value 値の操作になるため、全て .val() で実装することができます。フォームオブジェクトの中では最も基本となる操作なので、まずはここから身につけるようにしましょう。

以上、jQuery でテキストボックスの値を設定／取得／追記／削除を行う方法でした。