Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type="number"» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type="number"».
На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:
Для примера возьмем три input`a с разными атрибутами:
Рабочий пример.
Проверено: opera, chrome, ff, ie9+
Буду рад любым советам, замечаниям и предложениям.
Добавлена поддержка стрелочек клавиатуры.
На данный момент плагину передается только один параметр — это селектор, к которому применяется 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:
Добавлена поддержка стрелочек клавиатуры.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Ваше мнение относительно этого поста:
28.22% Хорошее решение, буду использовать.46
4.91% Я знаю решение лучше. (но не могу/не хочу писать комментарии)8
21.47% Я ничего не понял.35
45.4% Автор краб, выкинь комп в окно.74
Проголосовали 163 пользователя. Воздержались 104 пользователя.