Das nicht hilfreiche HTML

Ihr denkt vielleicht, dass die Erstellung einer konsistenten, sauberen und professionellen Spinbox in HTML eine einfache Aufgabe wäre ... Zu unserer Verzweiflung gibt es jedoch kein Standardattribut, das einer Eingabe mitteilt, dass sie nur Ganzzahl- oder Dezimalwerte akzeptieren soll , alle Eingabefilter müssen JS sein. Autsch!

Ich werde diese Funktionalität mit Go, a-h/Templ, Tailwind und meinen geliebten Alpine.js implementieren, um das Leben einfacher zu machen.

Hinzufügen des Skeletts

Wir beginnen damit, eine grundlegende Vorlage für unsere Integer-Spinbox zu schreiben:

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

Wir definieren IntInterval wie folgt:

type IntInterval struct {
  A, B int
}

Mit dem Intervall legen wir die Mindest- und Höchstwerte der Eingabe fest. Da wir eine ganzzahlige Spinbox erstellen, wird der Schritt immer auf „1“ gesetzt.

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

CSS hinzufügen

Beginnen wir nun mit dem Hinzufügen einiger zwei Klassen. Im Folgenden sind einige spezielle Eigenschaften und Pseudoelemente aufgeführt, die die Darstellung der Eingabe steuern.
select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

Die folgenden zusätzlichen Klassen werden verwendet, um die Standard-Spinner-Schaltflächen zu entfernen:
[&::-webkit-inner-spin-button]:[-webkit-appearance:none] [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance: Textfeld]

Zuletzt fügen wir noch einige grundlegende Polsterungen, Ringe, Farben usw. hinzu...
Block w-voll abgerundet-l-md py-2 px-2.5 text-gray-900 ring-1 ring-inset ring-gray-300 Platzhalter:text-gray-400 Fokus:outline-none Fokus:ring-2 Fokus: ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6

Wenn wir es zu unserer Vorlage hinzufügen, erhalten wir Folgendes:

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

Jetzt sollten Sie eine sehr textähnliche Eingabe erhalten, mit einer grundlegenden Validierung, wenn Sie mit der Maus darüber fahren. Im nächsten Abschnitt werden wir die Funktionalität zur Prüfung auf gültige Ganzzahleingaben hinzufügen.

Implementierung des Filters

Die Grundidee einer Integer-Spinbox ist eine Eingabe, die nur ganze Zahlen akzeptiert. Ich habe zunächst versucht, diese Funktion zu implementieren, indem ich das Musterattribut von HTML wie folgt verwendet habe:

Das Musterattribut nimmt eine Regex-Zeichenfolge und verwendet sie, um die Benutzereingabe zu validieren. Es verhindert jedoch nicht, dass ungültige Eingaben überhaupt eingegeben werden. Eigentlich wurde es für eine einfache clientseitige Validierung erstellt.

Das „oninput“-Ereignis

Jedes Mal, wenn der Benutzer eine beliebige Taste im Eingabefeld drückt, wird ein oninput-Ereignis generiert. Erfassen Sie dieses Ereignis mit der Alpine-Syntax x-on:input und korrigieren Sie den Wert entsprechend für das Eingabeelement. Erstellen wir ein übergeordnetes Div mit einem X-Daten-Attributsatz und fügen wir eine Funktion hinzu, mit der wir überprüfen können, ob die Eingabe überhaupt eine Zahl ist ... Anschließend können wir den Wert entsprechend runden.

Für diejenigen, die Alpine nicht kennen: $el wird hier verwendet, um auf das aktuelle DOM-Element zu verweisen.

Kundenspezifische Spinner

Im zuvor erstellten übergeordneten Div fügen wir das folgende class="flex" und ein x-ref="spinbox"-Attribut zur Eingabe hinzu, damit unsere Schaltflächen ihren Status über die magische Eigenschaft $refs.spinbox ändern können:

Wir fügen dann nach der Eingabe ein neues Kind hinzu, das unsere Schaltflächen enthalten wird:

  

    
    -
    
     
  

Hier verwenden wir Flex-Col-Reverse als einfache Möglichkeit, die Tabulatorreihenfolge korrekt beizubehalten. Zuerst sollte die Tabulatortaste auf „-“ und dann auf „ „ gesetzt werden.

Anschließend fügen wir die Event-Handler mit x-on:click zu den Schaltflächen hinzu. Der vollständige Code (ohne CSS) lautet wie folgt:

  

    
    -
    
     
  

Wir müssen e.value und e.step konvertieren, bevor wir rechnen können, da es sich dabei um Zeichenfolgen handelt.

Wenn es um CSS für die Spinner-Schaltflächen geht, sind diese sehr ähnlich der Eingabe gestaltet, der vollständige Code ist unten aufgeführt.

Die endgültige Vorlage

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

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

    

          
          -
          
           
        
    
  
}

Genießen :)

Funktioniert weiter

• Mozilla Firefox 130.0 (64-Bit)
• Version 128.0.6613.120 (Offizieller Build) (64-Bit)