Analyse et solutions au problème d'incompatibilité de la nouvelle balise HTML5 Placeholder dans les navigateurs de version inférieure _Compétences du didacticiel HTML5

L'attribut placeholder est un nouvel attribut en HTML5, communément appelé "placeholder". Sa fonction est similaire à celle d'une zone de saisie. Lorsqu'il obtient le focus, la valeur par défaut devient vide, et lorsqu'il perd le focus, il est activé. affichera le texte par défaut, je pense que tout le monde doit avoir utilisé js/jquery pour créer un tel effet. Actuellement, il n'est pris en charge que par les navigateurs modernes tels que Mozilla Firefox 3.7, Apple Safari 4, Google Chrome 4 et Opera11. »
L'attribut placeholder est ajouté pour la saisie en HTML5. Fournissez un espace réservé sur l'entrée pour afficher les informations d'indice (indice) de la valeur attendue du champ de saisie sous forme de texte. .
Exemple :

Copier le code

Le code est le suivant :

Placeholder est très pratique à utiliser, ce qui améliore l'efficacité du développement. En même temps, l'expérience utilisateur est également très bonne dans les navigateurs de versions supérieures, j'aime donc beaucoup utiliser cet attribut.

Cependant, il n'est pas valide dans les navigateurs inférieurs à IE9, et IE10 prend en charge l'attribut d'espace réservé, et ses performances sont incohérentes avec celles des autres navigateurs •Dans IE10, le texte de l'espace réservé disparaît lorsque l'on clique sur la souris (obtient le focus)

• Les clics Firefox/Chrome/Safari ne disparaissent pas, mais le texte disparaît lors de la frappe au clavier
Alors en tant que développeur, dois-je pallier à ce problème ? Il existe actuellement de nombreuses solutions similaires sur Internet, et les idées de mise en œuvre sont grossièrement divisées en deux types :
1 (Méthode 1) Utiliser la valeur de l'entrée comme texte d'affichage, simuler le style gris et se concentrer. on $("[placeholder]").val ()=="", blur $("[placeholder]").val(this.defaultValue);
2 (Méthode 2) Ne pas utiliser de valeur, ajouter une balise supplémentaire (span) au corps, puis le positionnement absolu couvre l'entrée.
Puisque la première méthode est implémentée ici, elle occupe de la valeur et nécessite un jugement supplémentaire lors de la vérification, je recommande donc personnellement d'utiliser la deuxième méthode.
Tout d'abord, déterminez si le navigateur actuel prend en charge l'attribut placeholder :

Copiez le code

Le code est le suivant :

function placeholderSupport() {

retourne 'placeholder' dans document.createElement('input');

>


Code clé sur
 :

Copier le code

Le code est le suivant :

/*

*placeholder est compatible avec ie9 et versions antérieures Auteur : Gao Fengming add 2016-1-27

*/
$(function(){
if(!placeholderSupport()){ / / Déterminer si le navigateur prend en charge l'espace réservé
$(document).ready(function(){
//La boucle de traversée par défaut ajoute l'espace réservé
$('[placeholder]').each(function(){
$(this).parent().append("" $(this).attr('placeholder') ""
} )
$('[ placeholder]').blur(function(){
if($(this).val()!=""){ //Si la valeur actuelle n'est pas vide, masquez le placeholder
$(this).parent ().find('span.placeholder').hide();
}
else{
$(this).parent().find(' span.placeholder').show();
}
})
});
}
});
Le contenu ci-dessus vous présente l'analyse et les solutions de l'incompatibilité de la nouvelle balise HTML5 Placeholder dans les navigateurs de version inférieure. J'espère qu'il vous sera utile.