Числа как spinbox

Следующий шаг — числа. Следует заметить, что запрос числа намного сложнее, чем запрос электронной почты или веб адреса. Во-первых, числа сами по себе более сложны, чем может показаться. Введи число. -1? Нет, я имел в виду от 1 до 10. 7 1/2? Нет, нет, не дробное. Pi? Это вообще иррационально.

Я хочу сказать, что когда просят число, просят в рамках каких-то условий. Например, часто требуется число в каком-то диапазоне, чтобы число было целым, или более необычное требование — чтобы делилось на 10 без остатка. HTML5 способен удовлетворить некоторые такие условия. Смотрим пример:

<input type="number"
	min="0"
	max="10"
	step="2"
	value="6">

Рассмотрим каждый атрибут по отдельности:

• type=»number» обозначает, что данное поле является числовым;
• min=»0″ определяет минимальное доступное значение для этого поля;
• max=»10″ максимальное допустимое значение;
• step=»2″ в сочетании с значениями min и max определяет диапазон допустимых значений: 0, 2, 4, 6, 8, 10;
• value=»6″ — значение по умолчанию. Этот атрибут должен быть знакомым. Так же как и атрибут name — имя поля. (Тут я об этом упомянул, чтобы подчеркнуть, что ранее полученные знания все так же нужны).

Все эти атрибуты являются необязательными. Можно задать минимальное значение, но не указывать максимальное. По умолчанию step имеет значение 1. Если нет значения по умолчанию, в разметке можно не использовать атрибут value или оставить его пустым.

Но HTML5 не останавливается на этом. На добавку получаем еще несколько методов Javascript:

• input.stepUp(n) — увеличивает значение поля на n;
• input.stepDown(n) — уменьшает значение поля на n;
• input.valueAsNumber — возвращает текущее значение поля как число с плавающей запятой (значение input.value всегда является строкой).

Есть ли проблемы визуализации такого поля? Производители браузеров пошли каждый своей дорогой. В iPhone клавиатура оптимизируется для ввода чисел:

В настольной версии Opera это поле отображается в виде spinbox: рядом с полем расположены стрелочки для увеличения/уменьшения значения поля.

В Opera этот типа поля хорошо продуман. Например, когда значение достигнет максимума, верхняя стрелочка становится недоступной:

Как и с остальными новыми типами полей, если браузер не поддерживает type=»number», он отобразит его как type=»text». Значение по умолчанию будет точно понято всеми, а новые атрибуты, если кто не поймет, то проигнорирует. Для старых браузеров их можно реализовать по-старинке — на Javascript. Просто проверяем поддержку нужных возможностей с помощью Modernizr:

if (!Modernizr.inputtypes.number) {
	// нет встроенной поддержки type="number"
	// юзаем Javascrpt
}

Куда дальше

• следующая — Числа как ползунок
• предыдущая — Веб адреса
• содержание