役に立たない HTML

皆さんは、一貫性があり、クリーンでプロフェッショナルなスピンボックスを HTML で作成するのは簡単なことだと思うかもしれません...しかし、残念なことに、入力に整数値または 10 進数値のみを受け入れるように指示する標準属性がありません。 、すべての入力フィルタリングは JS である必要があります。アウト！

作業を楽にするために、Go、a-h/Templ、Tailwind、そして私の最愛の Alpine.js を使用してこの機能を実装するつもりです。

スケルトンの追加

まず、整数スピンボックスの基本テンプレートを作成します。

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

IntInterval を次のように定義します:

type IntInterval struct {
  A, B int
}

間隔で入力の最小値と最大値を設定します。整数スピンボックスを作成しているため、ステップは常に「1」に設定されます。

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

CSSの追加

次に、2 つのクラスの追加を開始しましょう。以下は、入力のレンダリングを制御するいくつかの特別なプロパティと疑似要素です。
select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

次の追加クラスは、デフォルトのスピナー ボタンを削除するために使用されます:
[&::-webkit-inner-spin-button]:[-webkit-Appearance:none] [&::-webkit-outer-spin-button]:[-webkit-Appearance:none] [-moz-Appearance:テキストフィールド]

最後に、基本的なパディング、リング、色などを追加しましょう...
block w-fullrounded-l-md py-2 px-2.5 text-gray-900 リング-1 リングインセット リング-グレー-300 プレースホルダー:テキスト-グレー-400 フォーカス:アウトライン-なし フォーカス:リング-2 フォーカス:リング-プライマリ-400 bg-gray-50 sm:text-sm sm:leading-6

これをテンプレートに追加すると、次のようになります:

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

これで、非常にテキストに近い入力が得られ、マウスをその上に置くと基本的な検証が行われるはずです。次のセクションで、有効な整数入力をチェックする機能を追加します。

フィルターの実装

整数スピンボックスの基本的な考え方は、整数をのみ受け入れる入力です。私は最初、次のように HTML の pattern 属性を使用してこの関数を実装しようとしました:

パターン属性は正規表現文字列を受け取り、それを使用してユーザー入力を検証しますが、そもそも無効な入力の入力を防ぐことはできません。実際には、これは単純なクライアント側の検証のために作成されました。

「oninput」イベント

ユーザーが入力ボックス内のキーを押すたびに、oninput イベントが生成されます。 Alpine の構文 x-on:input を使用してこのイベントをキャプチャし、input 要素に応じて値を修正します。 x-data 属性セットを使用して親 div を作成し、入力が数値であるかどうかを確認できる関数を追加しましょう。その後、それに応じて値を丸めることができます。

Alpine を知らない人のために説明すると、ここでの $el は現在の DOM 要素を参照するために使用されます。

カスタムスピナー

前に作成した親 div に、次の class="flex" を追加し、x-ref="spinbox" 属性を入力に追加して、ボタンがマジック プロパティ $refs.spinbox を通じてその状態を変更できるようにします。

次に、ボタンを含む新しい子を入力の後に追加します。

  

    
    -
    
     
  

ここでは、タブ オーダーを正しく保つ簡単な方法として flex-col-reverse を使用します。まずタブで '-' に移動し、次に ' ' に移動する必要があります。

次に、x-on:click を使用してイベント ハンドラーをボタンに追加します。完全なコード (CSS を除く) は次のとおりです。

  

    
    -
    
     
  

e.value と e.step は文字列であるため、演算を行う前に変換する必要があります。

スピナー ボタンの CSS に関しては、入力と非常によく似たスタイルになっています。完全なコードは以下にあります。

最終的なテンプレート

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

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

    

          
          -
          
           
        
    
  
}

楽しむ ：）

に取り組んでいます

• Mozilla Firefox 130.0 (64 ビット)
• バージョン 128.0.6613.120 (公式ビルド) (64 ビット)