jQuery_jquery に基づいて IE ブラウザ互換のプレースホルダ効果を実現する 2 つの方法

プレースホルダーは HTML5 の属性の 1 つです。ブラウザー (HTML5 をサポートする最新のブラウザー) では表示効果が若干異なります。

Chrome (v31.0.1650.63 m)、Firefox (v21.0)、および 360 Security (v6.3 スピード モード) では、入力フィールドがフォーカスを取得した後、次のようにプロンプ​​ト テキストが消えません。図 (Chrome):

フォーカスを取得する前:

集中時:

IE11 は何か特別なことをする必要があります:

フォーカスを取得する前:

集中時:

つまり、テキスト プロンプトはフォーカスを取得すると消えます。

最新でないブラウザ (IE6 ～ IE9 など) はプレースホルダー属性をサポートしません。次に、jQuery を使用して、これらの非最新ブラウザでもプレースホルダ表示効果を実現できるようにします。つまり、Chrome のようなものを取得したい場合は、入力ボックスにフォーカスが当たるとプロンプト テキストが表示されなくなります。その結果、入力ボックスがフォーカスを取得したときにプロンプ​​ト テキストが消えなくなります。2 番目の方法を使用できます。

方法 1

効果のプレビュー:

http://jsfiddle.net/L57b25yr/embedded/result/

まず、ブラウザーがプレースホルダー属性をサポートしているかどうかを判断し、サポートしていない場合は、すべての入力ボックスを調べてプレースホルダー属性の値を取得し、それをプロンプト メッセージとして入力ボックスに入力し、フォントをグレーに設定します。 。

入力ボックスにフォーカスがあり、入力ボックス内のテキストが設定されたプロンプト情報と等しい場合、入力ボックスはクリアされます。

入力ボックスがフォーカスを失い (ぼやけて)、入力ボックス内のテキストが空の場合は、取得したプレースホルダー属性の値をプロンプト メッセージとして入力ボックスに入力し、フォントをグレーに設定します。

入力ボックスに入力(キーダウン)があると、フォーカスイベントによって入力ボックス内のプロンプト情報がクリアされます。このとき、フォントを黒に戻すだけで済みます。

このメソッドの欠点は、DOM のロード時にフォーカスを取得する入力ボックスには適していないことです。ユーザーの観点から見ると、ページのロード時にフォーカスを取得する入力ボックスのプロンプト テキストが表示されないためです。は見えません。

HTML:

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS:

.phcolor{ color:#999;}

JS:

$(function(){  

  //判断浏览器是否支持placeholder属性
  supportPlaceholder='placeholder'in document.createElement('input'),

  placeholder=function(input){

    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;

    if(!defaultValue){

      input.val(text).addClass("phcolor");
    }

    input.focus(function(){

      if(input.val() == text){
  
        $(this).val("");
      }
    });

 
    input.blur(function(){

      if(input.val() == ""){
      
        $(this).val(text).addClass("phcolor");
      }
    });

    //输入的字符不为灰色
    input.keydown(function(){
 
      $(this).removeClass("phcolor");
    });
  };

  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){

    $('input').each(function(){

      text = $(this).attr("placeholder");

      if($(this).attr("type") == "text"){

        placeholder($(this));
      }
    });
  }

});

テスト後、IE11 プレースホルダーの表示効果を実現できました。

方法 2

このメソッドのアイデアは、入力ボックスの背景画像としてプロンプト テキストを含む画像を作成し、最初にフォーカスを取得し、同時に背景画像をロードすることです。

背景画像は次のとおりです:

入力ボックスが空でない場合は、背景画像を削除します。

入力ボックスが空の場合、背景画像をロードします。

ユーザーがキーボードのキーを押し、入力ボックスが空でない場合 (文字を入力した場合)、背景画像を削除します。

ユーザーがキーボードのキーを押し、入力ボックスが空の場合 (文字を削除した場合)、背景画像を読み込みます。

この方法の欠点は、異なるプロンプト テキストを使用して入力ごとに背景画像を作成し、入力スタイルを設定する必要があることです。

HTML コードは変更されません。

CSS:

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS:

$(function(){  

   //判断浏览器是否支持placeholder属性
   supportPlaceholder='placeholder' in document.createElement('input');

   if(!supportPlaceholder){

     //初始状态添加背景图片
     $("#uname").attr("class","phbg");
     //初始状态获得焦点
     $("#uname").focus;

     function destyle(){
     
      if($("#uname").val() != ""){
        
        $("#uname").removeClass("phbg");
      }else{
      
        $("#uname").attr("class","phbg");
       }
     }
     
     //当输入框为空时，添加背景图片；有值时去掉背景图片
     destyle();

     $("#uname").keyup(function(){

      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
      destyle();
     });

     $("#uname").keydown(function(){
     
      //keydown事件可以在按键按下的第一时间去掉背景图片
      $("#uname").removeClass("phbg");
     });
   }
});

このメソッドは終了します。

このメソッドは IETester の IE8 で効果を表示します:

集中時:

フォーカスが失われたとき:

入力時:

誰かがより良い方法を持っている場合は、お気軽に議論してください。