【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