Создание форм может быть повторяющейся работой. Часто отдельные элементы формы появляются последовательно в широком диапазоне форм. Эти элементы пригодны для создания в качестве компонентов, которые можно повторно использовать в различных приложениях форм.
Одним из таких повторяющихся требований к формам является числовое поле. Многие формы включают по крайней мере одно поле, которое может принимать числовые значения, которые встречаются в определенном диапазоне и округляются до целых чисел (т. Е. Десятичные дроби не допускаются).
Приложения Rich-client имеют такой виджет — текстовое поле, за которым следуют стрелки «вверх» и «вниз», которые позволяют пользователям увеличивать или уменьшать значение поля. VB.NET вызывает этот виджет NumericUpDown .
Чтобы обеспечить эту функциональность в простом HTML, мы могли бы использовать выпадающий список, который содержал все возможные значения в качестве параметров. Это решение имеет несколько недостатков:
- Если вам нужно, чтобы пользователь выбирал из широкого диапазона чисел, раскрывающийся список может стать очень длинным. Пользователям, возможно, придется прокрутить список и потратить много времени, чтобы достичь желаемого значения.
- Вам нужно огромное количество разметки, чтобы создать выпадающий список.
Лучший вариант — разрешить пользователям вводить значение в простое текстовое поле и проверять свои записи на сервере.
Нам нужно использовать внутреннюю проверку, так как мы не можем полагаться на доступность JavaScript в системах пользователей. Однако мы можем использовать JavaScript, чтобы избежать разочаровывающих перезагрузок страниц и превратить простое текстовое поле в виджет «счетчик».
Поле на демонстрационной странице дополнено сценарием, который создает ссылки для увеличения или уменьшения значения поля, когда Javascript доступен. Для доступа ко всему коду, представленному в этой статье, загрузите архив кода здесь .
Как это устроено
Чтобы достичь желаемой функциональности, все, что нам нужно сделать, это встроить файл createcounter.js в наш HTML-документ:
<script type="text/javascript" src="createcounter.js"></script> Нам также нужно добавить специальный идентификатор в каждое текстовое поле, которое мы хотим стать счетчиком:
<input type="text" size="3" name="passengers_ctr_1_12" id="passengers_ctr_1_12" value="1" />
(Атрибут name сохраняется в коде для обеспечения обратной совместимости.)
Синтаксис идентификатора выглядит следующим образом:
(any name)_ctr_(minimum value)_(maximum value) foo_ctr_0_10 Allows integer values between 0 and 10 for foo bar_ctr_-10_10 Allows integer values between -10 and 10 for bar baz_ctr_1_999 Allows integer values between 1 and 999 for baz
Вместо идентификатора мы могли бы использовать name класса или bespoke на bespoke атрибут с правильным пространством имен. Однако использование идентификатора позволяет нам повторить эту же проверку на серверной части, например, в PHP.
Некоторые разработчики могут не одобрять это смешение разметки и бизнес-логики, но это избавляет нас от необходимости копировать правила из кода JavaScript в сценарии внутреннего интерфейса.
JavaScript автоматически:
- проверяет, что запись является числом, целым числом и находится в указанном диапазоне
- проверяет значение элемента counter при загрузке страницы
- проверяет и увеличивает значение при нажатии на ссылку увеличения
- проверяет и уменьшает значение при нажатии на ссылку уменьшения
- проверяет значение, как только пользователь ввел текст и покинул поле
Если запись либо не является числом, либо ниже минимально допустимого значения, сценарий устанавливает значение на минимум. Если запись превышает максимум, сценарий устанавливает ее на максимум.
Настроить виджет
counterlink класса применяется к ссылкам, созданным с помощью этого решения. Поэтому ссылки могут быть настроены с помощью CSS. Чтобы настроить имя класса и отображаемый текст ссылки, установите переменные следующим образом:
var linkclass='counterlink'; var addtext='+'; var subtext='-'; var addbefore=true;
Переменная addbefore определяет местоположение убывающей ссылки. Значение true применяет ссылку перед текстовым полем. Значение false определяет его после текстового поля рядом с возрастающей ссылкой.
Недостатки решения
Это настолько, насколько HTML, CSS и JavaScript могут занять нас, оставаясь независимыми от мыши. Виджеты реального счетчика позволяют пользователям увеличивать и уменьшать значения с помощью клавиш курсора и ускорять прокрутку, чем дольше пользователь удерживает нажатой кнопку со стрелкой.
Может существовать решение, позволяющее использовать эту функцию в определенных средах браузера, но сомнительно, что оно может работать во всех современных браузерах.