web creating

POROA

【HTML5 】IE8,9にも対応 input テキストボックスにうっすら薄い文字をいれる方法

input text に入力を促したり説明を薄い文字で入れる方法をご紹介します。


一番簡単な方法は、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
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング