目次
クリックした時、フォーカスを合わせた時に属性を書き換える方法
テストコード：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 で文字が変化した後戻らない
