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
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!