Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie das JQuery-Plug-in, das Platzhaltereffekte für Textfelder und Kennwortfelder unterstützt, unter IE_jquery

WBOY
Freigeben: 2016-05-16 16:16:39
Original
1028 Leute haben es durchsucht

Ich habe dieses Plug-in vor langer Zeit geschrieben. Es basiert auf jQuery und wird hauptsächlich zur Implementierung von Platzhaltereffekten im IE verwendet. Es unterstützt sowohl Text- als auch Passworteingabefelder.

Platzhalter ist ein neues Attribut in HTML5. Wenn das Eingabeattribut festgelegt ist, wird der Inhalt des Werts im Textfeld als graue Eingabeaufforderung angezeigt. Wenn das Textfeld den Fokus erhält, verschwindet der Eingabeaufforderungstext.

Download-Adresse: http://xiazai.jb51.net/201501/other/placeholderfriend.rar

Der Implementierungscode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

(Funktion($) {
/**
* Bäume ohne Blumen
* 28.11.2012 15:12
​*/

var placeholderfriend = {
Fokus: Funktion(en) {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
If (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}

//Bestimmen Sie, ob Platzhalter unterstützt werden
Funktion isPlaceholer() {
var input = document.createElement('input');
Geben Sie „Platzhalter“ in der Eingabe zurück;
}
//Nicht unterstützter Code
if (!isPlaceholer()) {
$(function() {

var form = $(this);

//Alle Textfelder durchlaufen und Platzhalter-Simulationsereignisse hinzufügen
var elements = form.find("input[type='text'][placeholder]");
       elements.each(function() {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (pValue) {
                if (sValue == '') {
          s.val(pValue);
          }
}
});

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

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

//Durchsuchen Sie alle Passwortfelder und fügen Sie Platzhaltersimulationsereignisse hinzu
var elementsPass = form.find("input[type='password'][placeholder]");
       elementsPass.each(function(i) {
        var s = $(this);
      var pValue = s.attr("placeholder");
var sValue = s.val();
If (pValue) {
                if (sValue == '') {
//DOM unterstützt keine Typänderung. Sie müssen die Passwortfeldattribute kopieren und ein neues DOM generieren
               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");
if (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");
If (clsValue) {
            s.attr("class", clsValue "placeholderfriend");
          }
            s.hide().next().show();
}
});

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

Es ist sehr einfach zu verwenden, das Beispiel ist wie folgt:

Code kopieren Der Code lautet wie folgt:












Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage