JQueryでイベント発生時に属性を書き換える

クリックした時、フォーカスを合わせた時に属性を書き換える方法

テストコード:input にフォーカス(カーソル)が合うと メッセージ が変わる

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <!-- JQuery読み込み -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>

</head>
<body>
  <form>
    <input type="text" placeholder="ここで検索">
  </form>
</body>
</html>

CSS

form{
  width: 300px;
  height: 50px;
 }

input{
  width: inherit;
  height: inherit;
  box-sizing: border-box;
 }

JQuery

$(function(){
  $("input").on("focus",function(){
  $(this).attr("placeholder","キーワードを入力");
 })
});
 
$(function(){
  $("input").on("blur",function(){
  $(this).attr("placeholder","ここで検索");
 })
});
 

解説

HTML

form タグの中に inputタグ、placeholder(入力欄に入っている文字) には”ここで検索”と表示

他は 基本的なmetaタグ と JQuery を読み込むためのコードを入力

JQuery

フォーカスがあったら”キーワードを入力”と表示する。.blur でカーソルが外れたら場合も設定しないと、ずっと変更されたままなので注意。

$(function(){

});

上記が JQuery の基本の枠。2行目、3行目を解説

  • $(“input”) = input タグを指定
  • .on(“イベント名”,functnion(){ } = イベントを設定する。「focus(カーソルが乗ったら)」{ }内のコードが作動する
  • $(this) = イベントの作動となった要素を指定する。今回は「文字入力可能となっている input タグ」を指定
  • .attr(“属性名”,”内容”) = HTML で設定した属性を変更する。今回は input タグの placeholder の値を書き換える
  • 上半分は focus(カーソルが乗ったら) のイベント、下半分に blur(カーソルが外れたら) のイベントを設定する

blur のイベントを設定しないと focus で文字が変化した後戻らない

jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。