LINEでログイン
Googleでログイン
Twitterでログイン検索窓にアニメーションをつけよう！
問題
今回はデモのようにinputに入力しようとした時に中の文字が変わるようにしましょう！
自分の環境に書くコード
<form>
<input type="text" placeholder="ここで検索">
</form>
¥HTML¥
form{
width: 300px;
height: 50px;
}
input{
width: inherit;
height: inherit;
box-sizing: border-box;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$("input").focusin(function(){
$(this).attr("placeholder","キーワードを入力");
})
$("input").focusout(function () {
$(this).attr("placeholder","ここで検索");
});
});
¥JavaScript¥
完了にする！
解説