Pourquoi Chrome conserve-t-il le texte d'espace réservé lorsqu'il est activé et comment puis-je y remédier ?

Surmonter le problème d'espace réservé de mise au point automatique de Chrome avec CSS et jQuery

Lorsque vous travaillez avec du texte d'espace réservé en HTML, il est courant de rencontrer un problème où le texte de l'espace réservé reste visible même lorsque le champ de saisie obtient le focus. Les navigateurs tels que Firefox, Safari et Edge gèrent cela avec élégance et masquent automatiquement le texte de l'espace réservé. Cependant, Chrome n'y parvient souvent pas.

Pour résoudre ce problème spécifique avec Chrome, nous pouvons utiliser CSS ou jQuery. À l'aide de la règle CSS suivante, vous pouvez rendre le texte de l'espace réservé transparent lorsque le champ de saisie reçoit le focus :

input:focus::placeholder {
  color: transparent;
}

Cette déclaration CSS cible le texte de l'espace réservé spécifiquement lorsque le champ de saisie est ciblé. En définissant la couleur sur transparent, le texte de l'espace réservé devient effectivement invisible.

Si vous préférez une solution jQuery, vous pouvez utiliser le code suivant :

$(function() {
  $("input[placeholder]").focus(function() {
    $(this).attr("placeholder", "");
  });

  $("input[placeholder]").blur(function() {
    $(this).attr("placeholder", $(this).attr("data-placeholder"));
  });
});

Dans ce code jQuery, on écoute pour l'événement focus et l'événement flou sur les éléments d'entrée avec un attribut d'espace réservé. Lorsque le focus est obtenu, nous effaçons l'attribut placeholder, qui masque le texte de l'espace réservé. Lorsque le focus est perdu, nous restaurons le texte d'espace réservé en définissant l'attribut d'espace réservé sur la valeur stockée dans l'attribut data-placeholder, que nous avons défini lors de l'initialisation.

Les solutions CSS et jQuery masquent automatiquement automatiquement le texte d'espace réservé. dans Chrome lorsque le champ de saisie devient visible, garantissant ainsi une expérience cohérente et conviviale sur tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!