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