【HTML5 】IE8,9にも対応 input テキストボックスにうっすら薄い文字をいれる方法
input text に入力を促したり説明を薄い文字で入れる方法をご紹介します。
一番簡単な方法は、HTML5から導入された「placeholder」を入れることで可能です。
ただし、IE9以前の古いバージョンでは対応していません。
もし、どうしても、表示したい場合はjQueryで導入することになります。
【HTML】
【jQuery】
若干違う動きになるんですが、これでしたら動くかと思います。
面倒なうえ、重くなる可能性もあるので、IEの古いバージョンは非対応でいいかなと個人的には思います。
一番簡単な方法は、HTML5から導入された「placeholder」を入れることで可能です。
<form action="" method="post">
<input name="" type="text" value="" placeholder="ここに入ります" />
<input type="submit" value="送信" />
</form>
ただし、IE9以前の古いバージョンでは対応していません。
もし、どうしても、表示したい場合はjQueryで導入することになります。
jQueryバージョン
【HTML】
<form action="" method="post" id="ieplace">
<input name="" type="text" value="" />
<input type="submit" value="送信" />
</form>
【jQuery】
$(function(){
var ftext = 'ここに入ります' ;
var fflg = false ;
$("#ieplace input[type='text']").val(ftext);
$("#ieplace input[type='text']").focus(function(){
if(!fflg){
$(this).val('');
}
});
$("#ieplace input[type='text']").blur(function(){
if(!$(this).val()){
$(this).val(ftext);
fflg = false ;
}else{
fflg = true ;
}
});
});
若干違う動きになるんですが、これでしたら動くかと思います。
面倒なうえ、重くなる可能性もあるので、IEの古いバージョンは非対応でいいかなと個人的には思います。
著者:poroa | 投稿日:2016年10月03日 | カテゴリ:HTML


