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

2015/10/08

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

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

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

テキストボックスの書き換え/取得/追記/削除【HTML】
<input type="text" id="sampletext" value="テスト">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします