Je ne sais pas si cela pourrait être une sorte de bogue dans Chrome ou (plus que probablement) c'est moi qui fais quelque chose de mal. J'essaie de transformer une couleur d'arrière-plan de la zone de texte en rouge si ce qui est entré n'est pas un nombre.La validation de formulaire HTML5 ne fonctionne pas avec l'autofocus dans Chrome
J'ai cette page html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iSPT</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<form >
<input type="number" autofocus />
</form>
</body>
</html>
Et ceci est style2.css:
@CHARSET "ISO-8859-1";
:invalid{
background-color: red;
}
Cela ne fonctionne pas comme indiqué ci-dessus (la boîte ne devient pas rouge si j'entre les lettres) . Il y a deux façons de le faire fonctionner. Le premier était en supprimant l'attribut autofocus de l'entrée.
Sinon, si je mets le CSS du fichier externe en ligne dans la tête HTML, la validation fonctionne aussi bien. Je voudrais être capable de garder l'autofocus et la feuille de css externe si.
Des idées?
Semble certainement comme un bug de navigateur. Il n'y a aucune raison pour que cela soit différent lorsque vous avez des CSS externes en ligne. En regardant dans l'inspecteur, il semble que la règle devrait s'appliquer, et l'état de validité sur le DOM est réglé correctement. – robertc
Avec quels autres navigateurs cela fonctionne-t-il actuellement? – MrWhite
Si vous désactivez et activez immédiatement ceci: style invalide dans l'inspecteur des éléments et revenez à la page (vous pouvez fermer l'inspecteur d'élément si vous le souhaitez) alors cela fonctionne maintenant! Donc, il semble que _something_ ne soit pas d'abord «déclenché» ?! – MrWhite