Certains motifs HTML5 couramment utilisés (modèles)

Cet article introduit principalement un résumé des modèles HTML5 couramment utilisés (modèles) couramment utilisés, y compris certaines expressions régulières couramment utilisées, principalement pour la production de pages Web mobiles. Les amis qui en ont besoin peuvent y faire référence.

Récemment, lorsque je travaillais sur une page de téléphone mobile, j'ai rencontré le problème d'un clavier avec entrée numérique. L'approche précédente était juste un type d'utilisation unique = Tel, mais j'ai toujours senti que les lettres anglaises sur le clavier avec un numéro de téléphone à neuf grilles étaient trop intrusives. Je voulais donc essayer d'autres solutions de mise en œuvre, mais la conclusion finale était frustrant. Cependant, j'ai également profité de l'occasion pour en savoir plus sur l'attribut Pattern.

Permettez-moi d'expliquer les problèmes initiaux. En fait, ni Tel ni Number ne sont parfaits:

Type = Tel

L'avantage est que les performances du clavier d'iOS et d'Android sont similaires

L'inconvénient est que ces lettres sont superflues. Bien que je n'aie pas de trouble obsessionnel-compulsif, je me sens toujours bizarre.

type = nombre

L'avantage est un véritable clavier numérique implémenté sous Android

Inconvénient 1: Ce n'est pas un clavier à neuf grilles sous iOS, il n'est donc pas pratique d'y entrer

Disavantage 2: L'ancienne version d'Android (y compris le noyau X5 utilisé par WeChat) aura une queue super inutile derrière la boîte d'entrée. Heureusement, Android 4.4.4 a été supprimé.

Cependant, pour les lacunes 2, nous pouvons utiliser les pseudo-éléments détenus par webkit pour réparer: