Zusammenfassung der Lösungen zur Erzielung des Platzhaltereffekts_jquery

Platzhalter ist ein Attribut von html5. Es stellt Hinweisinformationen (Hinweis) bereit, die den erwarteten Wert des Eingabefelds beschreiben. Der Hinweis wird angezeigt, wenn das Eingabefeld leer ist. High-End-Browser unterstützen dieses Attribut (z. B. 10/11-Text verschwindet, wenn der Fokus erreicht wird), ie6/7/8/9 unterstützt es jedoch nicht. Um mit allen gängigen Browsern kompatibel zu sein und konsistente Rendering-Effekte zu gewährleisten, dienen die folgenden drei Lösungen nur als Referenz.

Option 1:

Verlassen Sie den ursprünglichen Attributplatzhalter, fügen Sie der Eingabe einen Geschwisterknoten-Span hinzu und legen Sie die absolute Positionierung für den Span fest (der übergeordnete Knoten ist position: relative;), sodass er sich über der Eingabe befindet. Der HTML-Codeausschnitt lautet wie folgt:

<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>

Der js-Code lautet wie folgt (ich habe einfach eine Funktion geschrieben, kein Plug-in-Formular, haha):

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

Persönliche Zusammenfassung: Lösung 1 eignet sich für die Anmeldeseite, jedoch nicht für das Hintergrundformularformular und die Front-End-Suchseite, da eine neue Eingabeaufforderungstextbeschriftung hinzugefügt werden muss, was nicht sehr benutzerfreundlich ist.

Option 2:

Verlassen Sie außerdem den ursprünglichen Attributplatzhalter und fügen Sie ein Attribut phText="Handynummer/E-Mail-Adresse" für hinzu. Standardmäßig ist der Wert der Eingabeaufforderungstext und die Farbe ist grau, wenn der Wert dem phText-Attributwert entspricht, ist der Wert leer, wenn der Wert den Fokus verliert ist leer. Der Wert value ist der Eingabeaufforderungstext. Der js-Code lautet wie folgt:

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

Persönliche Zusammenfassung: Option 2 eignet sich besser für das Backend-Seitenformular und die Frontend-Suchseite. Sie ist einfach zu bedienen und hat keine zusätzlichen Tags. Der Nachteil besteht darin, dass es nicht für den Passworttyp verwendet werden kann und der Eingabeaufforderungstext verschwindet, wenn den Fokus erhält (wenn der Wert dem phText-Attributwert entspricht), der sich vom ursprünglichen Platzhalterattribut unterscheidet.

Darüber hinaus können Sie das phText-Attribut in das Platzhalterattribut ändern. Nicht unterstützte Browser verwenden js, um {'placeholder' in document.createElement('input')} aufzurufen zweite Möglichkeit. Dieser Kompromiss hat auch Nachteile und die Ergebnisse sind nicht bei allen Browsern genau gleich.

Option drei:

Schreiben Sie eine Methode für Browser, die keinen Platzhalter unterstützen, und legen Sie die Farbe auf Grau fest. Wenn festgestellt wird, dass der Wert gleich ist Bewegen Sie den Cursor zum Platzhalterwert nach vorne (this.createTextRange und this.setSelectionRange). Wenn eine Eingabeoperation erfolgt, wird der Wert zunächst auf Null gesetzt und dann der Eingabewert empfangen. Darüber hinaus müssen Sie für einen hinzufügen, um den Eingabeaufforderungstext anzuzeigen ="text ">Ausblenden, dann anzeigen und ihm den Fokus geben. Diese Lösung weist auch einige kleinere Mängel auf, d. h. beim Einfügen mit der rechten Maustaste tritt ein Fehler auf.

Im Allgemeinen haben mehrere Optionen ihre eigenen Vor- und Nachteile. Ich bevorzuge Option 1 für die Anmeldeseite. Der Präsentationseffekt ist genau derselbe. Es ist nicht mühsam, einfach einen neuen Tab hinzuzufügen. Das Hintergrundformular und die Front-End-Suchseite bevorzugen Option 2, die einfach und effektiv ist, mit der Ausnahme, dass der Eingabeaufforderungstext verschwindet, wenn der Fokus erreicht wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.