placeholder効果を実現するシナリオの概要

placeholderはhtml 5のプロパティで、入力フィールドが空の場合に表示される入力フィールドの予想値を記述できるヒント情報(hint)を提供します.ハイエンドブラウザではこのプロパティがサポートされています(ie 10/11はフォーカスを取得すると文字が消えます)、ie 6/7/8/9ではサポートされていません.次の3つのシナリオは、各主流ブラウザと互換性を持ち、表示効果を一貫させるために参考にしてください.
シナリオ1:
元のプロパティplaceholderを捨ててinputに兄弟ノードspanを追加し、spanに絶対位置を設定します(親ノードはposition:relative;)inputの上に配置します.htmlコードクリップは次のとおりです.

携帯電話番号/メールアドレス

パスワードを入力してください

jsコードは以下の通りです(簡単に関数を書いて、プラグイン形式を書いていません、ほほほ):

function _placeholderText(phInput, phText) { //    ，  2   ――input    text     id  class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //          placeholder input
    var _this = $(this);
    var _text = _this.siblings(phText);
    if($.trim(_this.val()) == '') {
      _this.val("");
      _text.show();
    } else {
      _text.hide();
    }
  });
  $text.on('click', function() { //      ，input    
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { // input    ，value   （         ）          value     
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //    

個人的なまとめ:シナリオはログインページに適していますが、バックグラウンドformフォームやフロントの検索ページにはあまり適していません.新しいヒントテキストラベルを追加するには、あまり友好的ではありません.
シナリオ2:
同様に元の属性placeholderを捨てて、属性phText=「携帯電話番号/メールアドレス」を追加します.デフォルトでは、value値はプロンプトテキストで、色はグレーです.フォーカスを取得する場合、value値がphText属性値に等しい場合、value値は空にします.フォーカスが失われた場合、value値が空の場合、value値はプロンプトテキストになります.jsコードは以下の通りです.

function inputJsDIY(obj, colorTip, colorTxt) { //    ，  3   ――DOM  、        、        
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //                 
    if($.trim(_this.val()) == "") { //  value     ，    value         
      _this.val(_this.attr("phText"));
    } else if(_this.val() != _this.attr("phText")) {
      _this.css({"color": colorTxt}); //          
    }
  });
  obj.on("focus", function() { //        
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //        
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //           （       ）
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //    

個人総括:方案2はバックグラウンドページformフォームとフロント検索ページに適しており、操作が簡単で、追加ラベルがない.欠点はpasswordタイプでは使用できず、フォーカスを取得したときのプロンプトテキストが消えている(value値がphText属性値に等しい場合)点で、元のplaceholder属性とは異なる.
また、phText属性をplaceholder属性に変更し、サポートされているブラウザは元の効果を示し、サポートされていないブラウザはjsで{'placeholder'in document.createElement('input')}スキーマ2の関数を呼び出すこともできます.この折衷案にも欠点があり、各ブラウザの効果は完全に同じではありません.
シナリオ3:
placeholderをサポートしていないブラウザにメソッドを書くには、まずplaceholder値を割り当てて色をグレーにし、フォーカスを取得したときにvalue値がplaceholder値に等しいと判断したら、カーソルを一番前に移動します(this.createTextRangeとthis.setSelectionRange).入力操作が発生した場合は、value値を空にしてから入力値を受信します.また、プロンプトテキストを表示するために追加するには、入力操作が発生した場合に非表示にし、表示してフォーカスさせる必要があります.このスキームには、マウスの右クリックで貼り付けるとバグが発生するという小さな欠陥もあります.
全体的に言えば、いくつかの案にはそれぞれメリットとデメリットがある.ログインページはシナリオ1を使用する傾向があり、表示効果は完全に一致しており、新しいラベルを追加するだけでも面倒ではありません.バックグラウンドformフォームとフロント検索ページは、シナリオ2に傾き、簡単で効果的ですが、フォーカスが得られたときにテキストが消えることを示すだけです.
以上が本文のすべてですが、お好きになってください.