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

Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type="number"» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type="number"».

На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:

jQuery(function ($) {
	$('input[type=number]').iLightInputNumber();
});

Для примера возьмем три input`a с разными атрибутами:

<input type="number" id="input01" step="100" min="0" class="input1" placeholder="Your budget">
<input type="number" min="1" max="99" class="input2" placeholder="1">
<input type="number" min="1" class="input3 input4" value="1">

Рабочий пример.

Проверено: opera, chrome, ff, ie9+

Код плагина:

;(function ($) {

    $.fn.iLightInputNumber = function (options) {

        var inBox = '.input-number-box',
            newInput = '.input-number',
            moreVal = '.input-number-more',
            lessVal = '.input-number-less';

        this.each(function () {

            var el = $(this);
            $('<div class="' + inBox.substr(1) + '"></div>').insertAfter(el);
            var parent = el.find('+ ' + inBox);
            parent.append(el);
            var classes = el.attr('class');
            parent.append('<input class="' + newInput.substr(1) + '" type="text">');
            el.hide();
            var newEl = el.next();
            newEl.addClass(classes);
            var attrValue;

            function setInputAttr(attrName) {
                if (el.attr(attrName)) {
                    attrValue = el.attr(attrName);
                    newEl.attr(attrName, attrValue);
                }
            }

            setInputAttr('value');
            setInputAttr('placeholder');
            setInputAttr('min');
            setInputAttr('max');
            setInputAttr('step');

            parent.append('<div class=' + moreVal.substr(1) + '></div>');
            parent.append('<div class=' + lessVal.substr(1) + '></div>');

        }); //end each

        var value,
            step;

        var interval = null,
            timeout = null;

            function ToggleValue(input) {
                input.val(parseInt(input.val(), 10) + d);
                console.log(input);
            }

            $('body').on('mousedown', moreVal, function () {
                var el = $(this);
                var input = el.siblings(newInput);
                moreValFn(input);
                timeout = setTimeout(function(){
                    interval = setInterval(function(){ moreValFn(input); }, 50);
                }, 200);

            });

            $('body').on('mousedown', lessVal, function () {
                var el = $(this);
                var input = el.siblings(newInput);
                lessValFn(input);
                timeout = setTimeout(function(){
                    interval = setInterval(function(){ lessValFn(input); }, 50);
                }, 200);
            });

            $(moreVal +', '+ lessVal).on("mouseup mouseout", function() {
                clearTimeout(timeout);
                clearInterval(interval);
            });

            function moreValFn(input){
                var max = input.attr('max');
                checkInputAttr(input);
                var newValue = value + step;
                if (newValue > max) {
                    newValue = max;
                }
                changeInputsVal(input, newValue);
            }

            function lessValFn(input){
                var min = input.attr('min');
                checkInputAttr(input);
                var newValue = value - step;
                if (newValue < min) {
                    newValue = min;
                }
                changeInputsVal(input, newValue);
            }

            function changeInputsVal(input, newValue){
                input.val(newValue);
                var inputNumber = input.siblings(this);
                inputNumber.val(newValue);
            }

            function checkInputAttr(input) {
                if (input.attr('value')) {
                    value = parseFloat(input.attr('value'));
                } else if (input.attr('placeholder')) {
                    value = parseFloat(input.attr('placeholder'));
                }
                if (!( $.isNumeric(value) )) {
                    value = 0;
                }
                if (input.attr('step')) {
                    step = parseFloat(input.attr('step'));
                } else {
                    step = 1;
                }
            }

            $(newInput).change(function () {
                var input = $(this);
                var value = parseFloat(input.val());
                var min = input.attr('min');
                var max = input.attr('max');
                if (value < min) {
                    value = min;
                } else if (value > max) {
                    value = max;
                }
                if (!( $.isNumeric(value) )) {
                    value = '';
                }
                input.val(value);
                input.siblings(this).val(value);
            });

            $(newInput).keydown(function(e){
                var input = $(this);
                var k = e.keyCode;
                if( k == 38 ){
                    moreValFn(input);
                }else if( k == 40){
                    lessValFn(input);
                }
            });
    };
})(jQuery);

Буду рад любым советам, замечаниям и предложениям.

UPD:

Добавлена поддержка стрелочек клавиатуры.