Le HTML inutile

Vous pourriez penser que créer une spinbox cohérente, propre et professionnelle serait une tâche simple en HTML... Cependant, à notre grand désespoir, il n'existe pas d'attribut standard pour indiquer à une entrée qu'elle ne doit accepter que des valeurs entières ou décimales. , tous les filtrages d'entrée doivent être JS. Outch !

Je vais implémenter cette fonctionnalité avec Go, a-h/Templ, Tailwind et mon bien-aimé Alpine.js pour me simplifier la vie.

Ajout du squelette

Nous commençons par écrire un modèle de base pour notre spinbox entière :

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}

Nous définissons IntInterval comme suit :

type IntInterval struct {
  A, B int
}

Avec l'intervalle, nous définirons le min et le max de l'entrée. Comme nous créons une spinbox entière, le pas sera toujours défini sur « 1 ».

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

Ajout de CSS

Commençons maintenant à ajouter quelques classes, voici quelques propriétés spéciales et pseudo-éléments qui contrôlent le rendu de l'entrée.
select-none [-moz-user-select: aucun] [-ms-user-select: aucun] [-o-user-select: aucun] [-webkit-user-select: aucun]

Les classes supplémentaires suivantes sont utilisées pour supprimer les boutons rotatifs par défaut :
[&::-webkit-inner-spin-button]:[-webkit-apparence:aucun] [&::-webkit-outer-spin-button]:[-webkit-apparence:aucun] [-moz-apparence : champ de texte]

Enfin, ajoutons quelques rembourrages de base, anneaux, couleurs, etc...
bloc w-plein arrondi-l-md py-2 px-2.5 texte-gris-900 anneau-1 anneau-encart anneau-gris-300 espace réservé : texte-gris-400 focus : contour-aucun focus : anneau-2 focus : anneau-primaire-400 bg-gris-50 sm:text-sm sm:leading-6

En l'ajoutant à notre modèle, nous obtenons ce qui suit :

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

Vous devriez maintenant obtenir une entrée très semblable à du texte, avec une validation de base si vous passez votre souris dessus. Nous ajouterons la fonctionnalité permettant de vérifier les entrées entières valides dans la section suivante.

Implémentation du filtre

L'idée de base d'une spinbox entière est celle d'une entrée qui uniquement accepte les entiers. J'ai d'abord tenté d'implémenter cette fonction en utilisant l'attribut pattern de HTML comme suit :

L'attribut pattern prend une chaîne regex et l'utilise pour valider la saisie de l'utilisateur. Cependant, il n'empêche pas la saisie d'une saisie non valide en premier lieu. En fait, il a été conçu pour une simple validation côté client.

L'événement 'oninput'

Chaque fois que l'utilisateur appuie sur une touche à l'intérieur de la zone de saisie, un événement oninput est généré. capturez cet événement avec la syntaxe d'Alpine x-on:input et rectifiez la valeur en conséquence pour l'élément d'entrée. Créons un div parent avec un ensemble d'attributs x-data et ajoutons une fonction qui nous permettra de vérifier si l'entrée est un nombre... Après quoi nous pouvons arrondir la valeur en conséquence.

Pour ceux qui ne connaissent pas Alpine, $el ici est utilisé pour faire référence à l'élément DOM actuel.

Spinners personnalisés

Dans le div parent créé précédemment, nous ajoutons le class="flex" suivant et ajoutons un attrib x-ref="spinbox" à l'entrée afin que nos boutons puissent modifier son état via la propriété magique $refs.spinbox :

Nous ajoutons ensuite un nouvel enfant après la saisie, qui contiendra nos boutons :

  
  

    
    -
    
     
  

Ici, nous utilisons flex-col-reverse comme moyen simple de maintenir l'ordre de tabulation correct, il doit d'abord passer à « - », puis à « « .

Nous ajoutons ensuite les gestionnaires d'événements aux boutons en utilisant x-on:click, le code complet (hors CSS) est le suivant :

  
  

    
    -
    
     
  

Nous devons convertir e.value et e.step avant de faire des calculs car ce sont des chaînes.

En ce qui concerne le CSS pour les boutons spinners, ils ont un style très similaire à celui de l'entrée, le code complet est ci-dessous.

Le modèle final

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
  

    @InputLabel(name, label   " "   interval.toString(), tooltip)

    

        

          
          -
          
           
        
    
  
}

Apprécier :)

Fonctionne sur

• Mozilla Firefox 130.0 (64 bits)
• Version 128.0.6613.120 (version officielle) (64 bits)