Partagez le plug-in JQuery qui prend en charge les effets d'espace réservé de zone de texte et de zone de mot de passe sous IE_jquery.

J'ai écrit ce plug-in il y a longtemps. Il est basé sur jQuery et est principalement utilisé pour implémenter des effets d'espace réservé sous IE. Il peut prendre en charge les zones de saisie de texte et de mot de passe.

L'espace réservé est un nouvel attribut en HTML5. Lorsque l'attribut d'entrée est défini, le contenu de la valeur sera affiché dans la zone de texte sous la forme d'une invite grise. Lorsque la zone de texte devient active, le texte de l'invite disparaît.

Adresse de téléchargement : http://xiazai.jb51.net/201501/other/placeholderfriend.rar

Le code d'implémentation est le suivant :

Copier le code Le code est le suivant :

(fonction ($) {
/**
*Arbres sans fleurs
* 28/11/2012 15:12
​*/

var placeholderfriend = {
focus : fonction(s) {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
Si (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
>
var clsValue = s.attr("class");
si (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
>
>
>

//Déterminer si l'espace réservé est pris en charge
fonction isPlaceholer() {
var input = document.createElement('input');
Renvoie "espace réservé" en entrée ;
>
//Code non pris en charge
si (!isPlaceholer()) {
$(fonction() {

var form = $(this);

//Parcourez toutes les zones de texte et ajoutez des événements de simulation d'espace réservé
var elements = form.find("input[type='text'][placeholder]");
       elements.each(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
Si (pValeur) {
                if (sValue == '') {
          s.val(pValue);
          }
>
});

elements.focus(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
Si (sValeur && pValeur) {
Si (sValue == pValue) {
          s.val('');
          }
>
});

elements.blur(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
Si (!sValue) {
        s.val(pValue);
>
});

//Parcourez toutes les cases de mot de passe et ajoutez des événements de simulation d'espace réservé
var elementsPass = form.find("input[type='password'][placeholder]");
       elementsPass.each(function(i) {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
Si (pValeur) {
                if (sValue == '') {
//DOM ne prend pas en charge la modification de type. Vous devez copier les attributs de la zone de mot de passe et générer un nouveau DOM
.                var html = this.outerHTML || "";
                 html = html.replace(/s*type=(['"])?password1/gi, " type=text placeholderfriend")
             .replace(/s*(?:value|on[a-z] |name)(=(['"])?S*1)?/gi, " ")
             .replace(/s*placeholderfriend/, " placeholderfriend value='" pValue
"' " "onfocus='placeholderfriendfocus(this); ");
            var idValue = s.attr("id");
                if (idValue) {
          s.attr("id", idValue "placeholderfriend");
            }
            var clsValue = s.attr("class");
si (clsValue) {
          s.attr("class", clsValue "placeholderfriend");
            }
          s.hide();
          s.after(html);
          }
>
});

elementsPass.blur(function() {
        var s = $(this);
        var sValue = s.val();
            if (sValue == '') {
          var idValue = s.attr("id");
              if (idValue) {
            s.attr("id", idValue "placeholderfriend");
          }
          var clsValue = s.attr("class");
Si (clsValue) {
            s.attr("class", clsValue "placeholderfriend");
          }
            s.hide().next().show();
>
});

});
>
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

C'est très simple à utiliser, l'exemple est le suivant :

Copier le code Le code est le suivant :