Résumé des solutions pour obtenir un espace réservé effect_jquery

Placeholder est un attribut de html5. Il fournit des informations d'indice (indice) qui décrivent la valeur attendue du champ de saisie. L'indice sera affiché lorsque le champ de saisie est vide. Les navigateurs haut de gamme prennent en charge cet attribut (le texte ie10/11 disparaît lorsque le focus est obtenu), mais ie6/7/8/9 ne le prend pas en charge. Afin d'être compatible avec tous les principaux navigateurs et de conserver des effets de rendu cohérents, les trois solutions suivantes sont fournies à titre de référence uniquement.

Option 1 :

Abandonnez l'espace réservé de l'attribut d'origine, ajoutez un span de nœud frère à l'entrée et définissez le positionnement absolu pour le span (le nœud parent est position: relative;) afin qu'il soit situé au-dessus de l'entrée. L'extrait de code html est le suivant :

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

Le code js est le suivant (j'ai simplement écrit une fonction, pas de formulaire de plug-in, 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'); //调用函数

Résumé personnel : la solution 1 convient à la page de connexion, mais elle ne convient pas au formulaire d'arrière-plan et à la page de recherche frontale, car elle doit ajouter une nouvelle étiquette de texte d'invite, ce qui n'est pas très convivial.

Option 2 :

Abandonnez également l'espace réservé de l'attribut d'origine et ajoutez un attribut phText="numéro de téléphone portable/adresse e-mail" pour . Par défaut, la valeur est le texte d'invite et la couleur est grise ; lorsque obtient le focus, si la valeur est égale à la valeur de l'attribut phText, la valeur est vide lorsque est vide, la valeur est le texte d'invite. Le code js est le suivant :

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

Résumé personnel : l'option 2 est plus adaptée au formulaire de page backend et à la page de recherche frontend. Elle est simple à utiliser et n'a pas de balises supplémentaires. L'inconvénient est qu'il ne peut pas être utilisé pour le type de mot de passe et que le texte d'invite disparaît lorsque obtient le focus (lorsque la valeur est égale à la valeur de l'attribut phText), ce qui est différent de l'attribut d'espace réservé d'origine.

De plus, vous pouvez également remplacer l'attribut phText par l'attribut placeholder. Les navigateurs pris en charge afficheront l'effet d'origine. Les navigateurs non pris en charge utiliseront js pour déterminer {'placeholder' in document.createElement('input')} pour appeler le. deuxième option. Ce compromis présente également des inconvénients et les résultats ne sont pas exactement les mêmes selon les navigateurs.

Option trois :

Écrivez une méthode pour les navigateurs qui ne prennent pas en charge l'espace réservé. Tout d'abord, attribuez la valeur de l'espace réservé à et définissez la couleur sur gris. Ensuite, lorsque à la valeur d'espace réservé, déplacez le curseur vers Front (this.createTextRange et this.setSelectionRange). Lorsqu'une opération d'entrée se produit, la valeur est d'abord définie sur null, puis la valeur d'entrée est reçue. De plus, pour , vous devez ajouter un pour afficher le texte d'invite. Lorsqu'une opération de saisie se produit, vous devez ajouter Masquer, puis afficher et lui donner le focus. Cette solution présente également quelques défauts mineurs, c'est-à-dire qu'un bug apparaîtra lors du collage avec le bouton droit de la souris.

De manière générale, plusieurs options ont leurs propres avantages et inconvénients. Je préfère utiliser l'option 1 pour la page de connexion. L'effet de présentation est exactement le même. Il n'est pas gênant d'ajouter simplement un nouvel onglet. Le formulaire d'arrière-plan et la page de recherche frontale préfèrent l'option 2, qui est simple et efficace, sauf que le texte d'invite disparaît lorsque le focus est obtenu.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.