jQueryの基本｜テキストフォームを使って実践

2020 5/04

2019年8月18日 2020年5月4日

こんにちは、ボーノです。

今回はjQueryを使ったテキストフォーム操作をご紹介します。

記事内では実際に動くパーツを実装し、そのコードを公開していますので、

jQueryの動きを体感できると同時に、プログラムの書き方を知ることができます。

jQueryとは

jQueryとは、ジェイクエリーと読み、JavaScriptを使いやすくしたものです。

HTMLと組み合わせることによって、画面上の表示を動的に変更することができます。

基本的に、

セレクタ（要素の指定）
実行のタイミング
処理

という構成でプログラムを記述することになります。

<script>
  $("①セレクタ").②実行のタイミング(function(){
      ③処理
  })
</script>

この段階ではまだよく分からないと思いますので、以下で具体的なものを見ていきます。

先述のとおり、jQueryはJavaScriptを使いやすくしたものなので、その正体はJavaScriptです。

そのため、jQueryを使う場合はscriptタグ内で記述する必要があります。

【基礎１】テキストフォームに値を設定

まずは、jQueryを使ってテキストフォームに値を設定してみます。

HTMLでボタンとテキストフォームを準備しました。

ボタン１を押してみてください。

テキストフォームに値が勝手に設定されたかと思います。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
　　<button type="button" id="button_1">ボタン１</button>
</div>
<div>
　　<input type="text" id="sample_1" name="sample_1" autocomplete="off">
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- jQueryを使ってテキストフォームに値をセット -->
<script>
    // idがbutton_1の要素をクリックしたときに発動
　　$("#button_1").click(function(){
        // idがsample_1の要素に値をセット
    　　$("#sample_1").val("ボタンを押しました");
    })
</script>

ここで復習です。jQueryは

セレクタ（要素の指定）
実行のタイミング
処理

という構成でプログラムを記述することになります。

今回のプログラムで当てはめると、以下のとおりになります。

#button_1　←　idがbutton_1の要素を
click　←　クリックしたタイミングで
$(“#sample_1”).val(“ボタンを押しました”);　←　値を設定

「#」＋「文字列」でHTML内のidを指定。classやnameを指定する方法もあります。
セレクタ.clickとすることで、セレクタで指定した要素をクリックしたときに処理が行われるようにできます。今回はボタンを使いましたが、ボタン以外でも大丈夫です。
処理の中でもjQueryを使っています。セレクタ.val(“任意の文字列”)で、指定したフォームの値（value）を設定することができます。

jQueryは、使う前にjQuery自体を読み込む必要があります。

「Web上にあるものを読み込む方法」と「ダウンロードしたjQueryを読み込む方法」があります。

今回は、前者を採用しています。

【基礎２】テキストフォームの値を取得

次は、jQueryを使って、テキストフォームに入力された値を取得してみます。

HTMLでボタンとテキストフォーム×２を準備しました。

上のフォームに文字を入力し、ボタン２を押してみてください。

上のフォームに入力した値が、下のフォームにコピーされたかと思います。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
  <p>ボタン２を押すと上のフォームの値が下のフォームにコピーされます</p>
  <button type="button" id="button_2">ボタン２</button>
</div>

<div>
  <input type="text" id="sample_2" name="sample_2" placeholder="ここに入力してください" autocomplete="off">
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- jQueryを使って、テキストフォームの値を取得し、別のテキストフォームに値をセット -->
<script>
  // idがbutton_2の要素をクリックしたときに発動
  $("#button_2").click(function(){
    // idがsample_2の要素の値を取得し、idがsample_3の要素に値をセット
    $("#sample_3").val($("#sample_2").val());
  })
</script>

ほとんど『【基礎１】テキストフォームに値を入力』のときのプログラムと同じです。

#button_2　←　idがbutton_2の要素を
click　←　クリックしたタイミングで
$(“#sample_3”).val($(“#sample_2”).val());　←　値を入力

違うのは③の処理ですね。

先ほどは、val(“ボタンを押しました”)と記述していたため、固定の文字列をテキストフォームに設定していました。

しかし今回は、”ボタンを押しました”の部分を次のように記述しています。

$(“#sample_2”).val()

セレクタ.val()の()内に何も書かなかった場合は、指定した要素の値を取得することができます。よって、

$(“#sample_3”).val($(“#sample_2”).val());

は、『下のフォーム（id=”sample_3″）に値を設定します。その値は、上のフォーム（id=”sample_2″）の値です』というプログラムになっていたので、今回の動きが実現できました。

セレクタ.val()は、

()内に何も書かなかった場合、フォームの値を取得
()内に何か書いた場合、()内に書いた値を設定

【応用】取得した値を使った処理（文字数チェック）

次は、jQueryを使って、テキストフォームに入力された値の文字数をチェックするプログラムをご紹介します。

※JavaScriptの変数やif文を使っています。

テキストフォームに文字を入力してみてください。

入力文字数：0文字

入力中に文字数が表示され、11文字以上入力すると、フォームの背景色が変わり、メッセージが表示されます。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
  <input type="text" id="sample_4" name="sample_4" placeholder="入力してください" autocomplete="off">
  <p>入力文字数：<span id="count">0</span>文字</p>
  <p id="error_message"></p>
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- 入力中の値を取得し、文字数チェックを行う -->
<script>
  // idがsample_4の要素でキーを離したときに発動
  $("#sample_4").keyup(function(){
    // 要素の値を取得し、文字数を数える
    var wordCount = $(this).val().length;
    // idがcountの要素に文字数をセット
    $("#count").text(wordCount);

    // 文字数に応じて処理
    if(wordCount>10){
      // 10文字より多い場合、フォームの背景をピンク色にし、エラーメッセージを表示
      $(this).css({"background-color":"pink"});
      $("#error_message").text("10文字以内で入力してください");
    }else{
      // それ以外の場合、フォームの背景を白色にし、エラーメッセージを削除
      $(this).css({"background-color":"white"});
      $("#error_message").text("");
    }
  })
</script>

セレクタ.keyup
今回は、実行のタイミングを「click」ではなく、「keyup」としています。
「keyup」は、キーボードのキーが押され、上がった際に処理を行います。
これによって、テキストフォームの入力中に、文字数をチェックする処理を行うことができます。
$(this)
セレクタに「this」と記述している箇所があります。
これは、イベント（実行のタイミングのこと）が発生した要素を指します。
今回でいうと「keyup」が発生した要素、つまり「”#sample_4″」のことを指します。
セレクタ.text()
text()はセレクタで指定したpタグやspanタグなどに対し、()内に記述したテキスト（文字）を設定します。
セレクタ.css()
css()はセレクタで指定した要素に対し、()内に記述したCSS（文字の色や大きさ、背景色などを指定するための言語）を設定します。