Бесполезный HTML

Ребята, вы можете подумать, что создание согласованного, чистого и профессионального счетчика в HTML будет простой задачей... Однако, к нашему отчаянию, не существует стандартного атрибута, который бы сообщал входным данным, что он должен принимать только целые или десятичные значения. , вся фильтрация ввода должна быть 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

Теперь давайте начнем добавлять несколько классов, ниже приведены некоторые специальные свойства и псевдоэлементы, которые управляют рендерингом ввода.
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: текстовое поле]

Наконец, давайте добавим базовые отступы, кольцо, цвета и т. д....
блок w-full rounded-l-md py-2 px-2.5 text-gray-900 кольцо-1 кольцо-вставка кольцо-серый-300 заполнитель: текст-серый-400 фокус: контур-нет фокус: кольцо-2 фокус: кольцо-первичный-400 bg-grey-50 см:текст-см см:ведущий-6

Добавив его в наш шаблон, получим следующее:

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

Теперь вы должны получить очень текстовый ввод с некоторой базовой проверкой, если вы наведете на него указатель мыши. В следующем разделе мы добавим функцию проверки допустимости целочисленных входных данных.

Реализация фильтра

Основная идея целочисленного счетчика заключается в том, что входные данные только принимают целые числа. Сначала я попытался реализовать эту функцию, используя атрибут шаблона HTML следующим образом:

Атрибут шаблона принимает строку регулярного выражения и использует ее для проверки ввода пользователя, однако он не предотвращает ввод недопустимого ввода в первую очередь. На самом деле это было сделано для простой проверки на стороне клиента.

Событие oninput

Каждый раз, когда пользователь нажимает любую клавишу внутри поля ввода, генерируется событие oninput. зафиксируйте это событие с помощью синтаксиса Alpine x-on:input и соответствующим образом исправьте значение для элемента ввода. Давайте создадим родительский элемент div с набором атрибутов x-data и добавим функцию, которая позволит нам проверить, является ли ввод вообще числом... После чего мы сможем округлить значение соответствующим образом.

Для тех, кто не знает 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-разрядная версия)