Rumah > Artikel > hujung hadapan web > Kongsi pemalam JQuery yang menyokong kesan ruang letak kotak teks dan kotak kata laluan di bawah IE_jquery
Saya menulis pemalam ini lama dahulu Ia berdasarkan jQuery dan digunakan terutamanya untuk melaksanakan kesan pemegang tempat di bawah IE. Ia boleh menyokong kedua-dua kotak input teks dan kata laluan.
Pemegang tempat ialah atribut baharu HTML5 Apabila atribut input ditetapkan, kandungan nilai akan dipaparkan dalam kotak teks sebagai gesaan kelabu Apabila kotak teks mendapat fokus, teks gesaan akan hilang.
Alamat muat turun: http://xiazai.jb51.net/201501/other/placeholderfriend.rar
Kod pelaksanaan adalah seperti berikut:
var pemegang tempat rakan = {
fokus: fungsi {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
Jika (idValue) {
s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
jika (clsValue) {
s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}
//Tentukan sama ada pemegang tempat disokong
fungsi ialahPlaceholer() {
var input = document.createElement('input');
Kembalikan "pemegang tempat" dalam input;
}
//Kod tidak disokong
jika (!isPlaceholer()) {
$(fungsi() {
borang var = $(this);
//Lintas semua kotak teks dan tambahkan acara simulasi pemegang tempat
elemen var = form.find("input[type='text'][placeholder]");
elemen.setiap(fungsi() {
var s = $(this);
var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (pValue) {
jika (sNilai == '') {
s.val(pValue);
}
}
});
elemen.fokus(fungsi() {
var s = $(this);
var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (sValue && pValue) {
Jika (sValue == pValue) {
s.val('');
}
}
});
elemen.kabur(fungsi() {
var s = $(this);
var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (!sValue) {
s.val(pValue);
}
});
//Lintas semua kotak kata laluan dan tambahkan acara simulasi pemegang tempat
var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(fungsi(i) {
var s = $(this);
var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (pValue) {
jika (sNilai == '') {
//DOM tidak menyokong pengubahsuaian jenis Anda perlu menyalin atribut kotak kata laluan dan menjana DOM baharu
var html = this.outerHTML ||
html = html.replace(/s*type=(['"])?password1/gi, "type=text placeholderfriend")
.ganti(/s*(?:nilai|pada[a-z] |nama)(=(['"])?S*1)?/gi, " ")
.ganti(/s*rakan pemegang tempat/, " nilai rakan pemegang tempat='" pValue
"' " "onfocus='placeholderfriendfocus(this);' ");
var idValue = s.attr("id");
jika (idValue) {
s.attr("id", idValue "rakan pemegang tempat");
}
var clsValue = s.attr("class");
jika (clsValue) {
s.attr("class", clsValue "rakan pemegang tempat");
}
s.hide();
s.after(html);
}
}
});
var s = $(this);
var sValue = s.val();
jika (Nilai == '') {
var idValue = s.attr("id");
jika (idValue) {
s.attr("id", idValue "rakan pemegang tempat");
}
var clsValue = s.attr("class");
Jika (clsValue) {
s.attr("class", clsValue "rakan pemegang tempat");
}
s.hide().next().show();
}
});
}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);