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