Кроссбраузерный красивый input type=«number»

[xsash]

И правду говорят, только подумал о проблеме, как на хабре появляется решение.

[Abcd_Efgh]

Почему вы не задумались о поддержке клавиатурного управления вашим «кроссбраузерным» решением (в кавычках потому, что оно поддерживается практически везде)? В итоге оригинальным решением пользоваться за счёт ↑ и ↓ проще, чем вашим.

[iLight]

Наконец то я что то начинаю понимать.
Похоже некоторые считают, что я тут изобрел велосипед, но это не так.

1. Основная цель данного плагина, не реализовать работоспособность в псевдобраузере ie (хотя и это многим на данный момент необходимо), а дать возможность легкой кастомизации для front-end разработчиков (так как нативный input number, выглядит по разному в разных браузерах, и кастомизации практически не подлежит). В моем же случае, стрелочки, легко заменяются на картинки или растровые шрифты (например FontAwesome) в соответствии c дизайном. (цель плагина опишу в тексте более подробно).

2. Поддержки клавиатурного управления пока действительно нет, но именно для этого я и добавил пост — чтобы обсудить и в случае необходимости усовершенствовать плагин. (соответственно стрелочки добавлю).

[Abcd_Efgh]

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

[piumosso]

> растровые
?

[Tishka17]

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

[iLight]

На сколько я понял основная проблема в том, что мы заставляем пользователя делать лишнее действие и самому переключаться на ввод цифр? Потому что никаких проблем в валидацией я не не увидел.
jsfiddle.net/iLight/c2rzqcec/5/ — нативный input
jsfiddle.net/iLight/c2rzqcec/6/ — input плагина

[sekrasoft]

Замечание для пользователей: плагин следует применять только осознавая, что и как он делает, поскольку из-за копирования <input> возникают побочные эффекты, о которых лучше знать заранее.

1. $('input[type=number]') возвращает и пользовательские, и сгенерированные элементы, следовательно
2. $('input[type=number]').show(); покажет скрытые пользовательские тэги;
3. $('#myInputID') выдаст интересный результат, если у инпута был ID;
4. Обработчики событий для исходного инпута скорее всего не будут вызваны, а изменение его атрибутов не изменит атрибуты отображаемого.

[iLight]

Нашел хорошее решение.
demos.telerik.com/kendo-ui/numerictextbox/keyboard-navigation

[iLight]

У бутстрапа оказывается тоже есть
bootstrapformhelpers.com/number/