【jQuery入門】テキストボックスに透かし文字を追加

フォーカスを移動したタイミングで処理を実行する

基本的には

• 初期化処理
• フォーカスしたときに透かし文字を非表示にする
• フォーカスが外れた時に透かし文字を再表示する
• サブミットしたときに透かし文字を非表示にする

が大枠の処理。

<div>
  <form id="form" action="" method="post">
    <input type="text" id="keywd" size="20">
    <input type="submit" value="送信">
  </form>
</div>

$(function () {
  const str = "検索条件";

  $("#keywd")
    .addClass("watermark")
    .val(str)
    .focus(function () {
      $(this).removeClass("watermark");
      if ($(this).val() === str) {
        $(this).val("");
      }
    })
    .blur(function () {
      $(this).removeClass("watermark");
      if ($(this).val() === "") {
        $(this).val(str);
        $(this).addClass("watermark");
      }
    });

  $("#form").submit(function () {
    if ($("#keywd").val() === str) {
      $("#keywd").val("");
    }
  });
});

.watermark {
  color: #c0c0c0;
}

See the Pen
jQuery12-1 by shinjiezumi (@sezumi)
on CodePen.

フォーム関連、その他のイベントを理解する

その他、比較的よく利用すると思われるchange, scroll, contextmenuイベントについての補足

要素の値を変更したタイミングで処理を行う

changeイベントは、テキストボックスや選択ボックス、テキストエリアなど、フォーム要素の値を変更したタイミングで発生する。

<div>
  <select name="" id="books">
    <option value="漫画">漫画</option>
    <option value="雑誌">雑誌</option>
    <option value="参考書">参考書</option>
  </select>
  <div id="msg"></div>
</div>

$(function () {
  $("#books").change(function () {
    $("#msg").text($(this).val() + "が選択されました");
  });
});

See the Pen
jQuery12-1 by shinjiezumi (@sezumi)
on CodePen.

画面をスクロールしたタイミングで処理を行う

scrollイベントは、ブラウザ上で表示されたページをスクロールしたタイミングで発生する。

mousemoveイベントでマウスの移動に応じて、イベントの発生元となるimg要素の垂直位置(cssのtopプロパティ)、水平位置(cssのleftプロパティ)を設定している

<div style="position: relative">
  <ul id="menu" style="z-index: 10; background-color: white; border: solid 1px red">
    <li><a href="">トップページ</a></li>
    <li><a href="">FAQ</a></li>
    <li><a href="">お問い合わせ</a></li>
  </ul>
</div>

$(function () {
  $(window).scroll(function () {
    console.log($(this).scrollTop());
    $("#menu").css({
      top: $(this).scrollTop() + 20,
      left: $(this).scrollLeft() + 20
    });
  });
});

#menu {
  position: absolute;
  top: 20px;
  left: 20px;
}

See the Pen
jQuery12-2 by shinjiezumi (@sezumi)
on CodePen.

コンテキストメニューを非表示にする

ブラウザ上でマウスの右ボタンをクリックした時に表示されるメニューのことをコンテキストメニューと呼ぶ。

contextmenuイベントは、コンテキストメニューが表示される前の（ブラウザ上で右クリックした）タイミングで発生する

以下のようにすると、イベントデフォルトの動作が取り消され、右クリックしてもコンテキストメニューが表示されなくなる

$(function () {
  $(document).contextmenu(function (e) {
    e.preventDefault();
  });
});

See the Pen
jQuery12-3 by shinjiezumi (@sezumi)
on CodePen.