Comment masquer automatiquement le texte d'un espace réservé lors du focus dans Chrome ?

Masquage automatique du texte d'espace réservé lors du focus : un guide complet

Lors de l'ajout de texte d'espace réservé aux champs de saisie, les navigateurs le masquent généralement lors du focus de l'utilisateur . Cependant, Chrome présente une exception à ce comportement. Pour résoudre ce problème efficacement, explorons les solutions potentielles en utilisant à la fois CSS et jQuery.

Solution CSS

<br>input:focus::placeholder { <br> couleur : transparent;<br>}<br>

Cette règle CSS cible spécifiquement le texte de l'espace réservé lorsqu'un champ de saisie reçoit le focus, le rendant transparent. Par conséquent, le texte de l'espace réservé disparaît, simulant le comportement de masquage automatique souhaité.

Solution jQuery

Bien que la solution CSS soit suffisante pour la plupart des navigateurs, jQuery propose une alternative approche pour une personnalisation plus poussée :

<br>$(function() {<br> $("input").focus(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).attr("placeholder", "");

Copier après la connexion

}).blur(function() {

$(this).attr("placeholder", "Type something here!");

});
});

Ce script jQuery écoute les événements de focus et de flou sur les champs de saisie. Lorsqu'un champ obtient le focus, il efface son attribut d'espace réservé, faisant disparaître le texte de l'espace réservé. A l'inverse, lorsque le champ perd le focus, le texte d'espace réservé est restauré.

Conclusion

En implémentant l'une des solutions proposées, que ce soit en utilisant CSS ou jQuery, vous pouvez efficacement masquez automatiquement le texte de l'espace réservé lors du focus, améliorant ainsi l'expérience utilisateur dans différents navigateurs, y compris Chrome.

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!