jQueryの練習【keypress/keyup/addClass/removeClass/this】

今回jQueryでやってみた練習はこちらです。

① テキストを入力するためにキーを押すと、フォームの入力部分の背景色が変わる。
　＋　赤色で「keypressすると文字色が変わります」という文が出現。

②テキストを入力し終わってキーを離すと、フォームの入力部分の背景色が戻る。
　＋　青色で「keyupすると文字色が変わります」の文が出現。

この２つの動作が加わるよう、html/css/jQueryで書いてみました。

実際に作ってみたものがこちら。

jQueryの良い復習になりました。

【作り方】

html（つけたファイル名：test.html）

まずはhtmlでテキスト入力フォームを作ります。
作ったあとに気づいたのですが、「送信ボタン」を使いません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>javascriptで練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form method="post" action="" class="formArea">
    <div class="formItem">
      テキストを入力してください。
      <input type="text" name="" class="inputText js-key-text" autocomplete="off">
      <!--  フォームに入力があったらここにも変化が起こる  -->
      <span class="msgArea js-set-msg-text"></span>
    </div>

    <input type="submit" value="送信" class="btn">
  </form>

  <!--jQuery-->
  <script 
      src="https://code.jquery.com/jquery-3.4.1.js" 
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"></script>
  <script src="test.js"></script> </body>
</html>

jQuery(つけたファイル名：test.js)

jQueryは以下のように書いてみました。
細かくコメントも書いたので、学習に役立つと思います。

$(function(){
   //$('.js-key-text')に対して、【keypress（キーを押したとき）】をしたとき、function(e)以下を実行
  $('.js-key-text').on('keypress',function(e){

    // まずは下の「keyup」イベントで追加されたクラス名「unchange-colorBlue」を取りのぞく。
    $('.js-set-msg-text').removeClass('change-colorBlue');

    // クラス名「change-color」を追加する。
    $('.js-set-msg-text').addClass('change-colorRed');

    // テキスト文を表示させる。
    $('.js-set-msg-text').text('keypressすると文字色が変わります');

    // $(this) = $('.js-key-text')にクラス名「change-background」を追加。
    $(this).addClass('change-background');
  });

   //$('.js-key-text')に対して、【keyup（キーを離したとき）】をしたとき、function(e)以下を実行
  $('.js-key-text').on('keyup',function(e){

    // まずは上の「keypress」で追加されたクラス名「unchange-colorRed」を取りのぞく。
    $('.js-set-msg-text').removeClass('change-colorRed');

    // クラス名「change-colorBlue」を追加する。
    $('.js-set-msg-text').addClass('change-colorBlue');

    // テキスト文を表示させる。
    $('.js-set-msg-text').text('keyupすると文字色が変わります');

    // $(this) = $('.js-key-text')にクラス名「change-background」が追加されているから、それを取り除く。
    $(this).removeClass('change-background');
  });
});

使ったもの、勉強になったこと

【イベント】
keypress: キーを押し込んだとき
keyup: キーを離したとき

【メソッド】
addClass: クラスを追加する
removeClass: クラスを取り除く

【その他】
$(this): 自分自身を表す。
この$(this)は、「$('.js-key-text')」を表しています。

thisには「’’」（シングルクォーテーション）がいらないのが要注意！（自分が間違えた）

CSS（つけたファイル名：style.css）

CSSはhtmlが見やすいようにスタイルを当てて、追加した文は以下のものです。

.change-colorRed{
  color: #ff1493;
}
.change-colorBlue{
  color: #32aaaa;
}
.inputText.change-background{
  background: #f0f222;
}

CSSに追加したこの３つのクラスを、jQueryでhtmlに追加したり、取り除いたりしています。

初歩中の初歩だと思いますが、自分で作れたのが嬉しい！
javascript/jQueryの練習として
「クラスをつけたり外したりして文字色を変える」のが初学者にはおすすめ
とどこで読んだか忘れてしまいましたが、そんな話を聞いたことがあります。

javascript/jQueryで文字色を直接変えるより、クラスの追加・削除だけした方が読み込みスピードが速くなるし
クラスの追加・削除を業務上使う機会が多いから。という理由だったと思います。

誰かの参考になれば幸いです。

kuruton_ternのブログ

プログラミングのアウトプットブログ。