プレースホルダーeffect_jqueryを実現するためのソリューションの概要

プレースホルダーは html5d5fd7aea971a85678ba271703566ebfd の属性で、入力フィールドの期待値を説明するヒント情報 (ヒント) を提供します。ヒントは、入力フィールドが空の場合に表示されます。ハイエンドのブラウザはこの属性をサポートしています（ie10/11 ではフォーカスを取得するとテキストが消えます）が、ie6/7/8/9 はサポートしていません。すべての主要なブラウザと互換性を持ち、一貫したレンダリング効果を維持するために、次の 3 つの解決策は参考用です。

オプション 1:

元の属性プレースホルダーを放棄し、兄弟ノード スパンを入力に追加し、入力の上に配置されるようにスパンの絶対位置を設定します (親ノードはposition:relative;)。 HTML コード スニペットは次のとおりです:

<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="text" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
  </div>
</li>
<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="password" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
  </div>
</li>

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'); //调用函数

個人的な要約: 解決策 1 はログイン ページには適していますが、バックグラウンド フォーム フォームやフロントエンド検索ページには適していません。新しいプロンプト テキスト ラベルを追加する必要があり、あまりフレンドリーではないからです。

オプション 2:

また、元の属性プレースホルダーを破棄し、d5fd7aea971a85678ba271703566ebfd に phText="携帯電話番号/メール アドレス" 属性を追加します。デフォルトでは、値はプロンプトテキストであり、d5fd7aea971a85678ba271703566ebfd がフォーカスを取得した場合、値が phText 属性値と等しい場合、値は空白になります。は空白です。値 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 は、バックエンド ページ フォームとフロントエンド検索ページに適しています。操作は簡単で、追加のタグはありません。欠点は、パスワード タイプ d5fd7aea971a85678ba271703566ebfd には使用できないことと、d5fd7aea971a85678ba271703566ebfd がフォーカスを取得したとき (値が phText 属性値と等しいとき)、プロンプト テキストが消えることであり、これは元のプレースホルダー属性とは異なります。

さらに、phText 属性を placeholder 属性に変更することもできます。サポートされているブラウザでは、元の効果が表示されます。サポートされていないブラウザでは、js を使用して {'placeholder' in document.createElement('input')} を呼び出します。 2番目のオプション。この妥協には欠点もあり、結果はブラウザーによってまったく同じではありません。

オプション 3:

プレースホルダーをサポートしていないブラウザ用のメソッドを作成します。まず、プレースホルダーの値を d5fd7aea971a85678ba271703566ebfd に割り当て、値が等しいと判断した場合に色を設定します。プレースホルダー値にカーソルを移動します (this.createTextRange および this.setSelectionRange)。入力操作が発生すると、最初に値が null に設定され、次に入力値が受信されます。さらに、794332e4da1b97221ff0ba8bc66903c4 の場合は、入力操作が発生したときにプロンプ​​ト テキストを表示するために、23efcc05e98690ceeb219581933e4231 を追加する必要があります。 ="text ">非表示にしてから表示 794332e4da1b97221ff0ba8bc66903c4 にフォーカスします。この解決策にはいくつかの小さな欠陥もあります。つまり、マウスの右ボタンで貼り付けるときにバグが表示されます。

一般に、いくつかのオプションにはそれぞれ長所と短所があります。ログイン ページにはオプション 1 を使用することを好みます。プレゼンテーション効果はまったく同じです。新しいタブを追加するだけで済みます。バックグラウンド フォームとフロントエンド検索ページでは、フォーカスを取得するとプロンプト テキストが消えることを除いて、シンプルで効果的なオプション 2 が優先されます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。