имеются два input'a, один из них дублирует второй, цифры переключаются при нажатии на + и - но также нужна возможность самому записать значение в поле, это значение должно быть ограничено, как раз от 1 до 30
jQuery(function($) {
$(document).on('keydown', '#setinputone', function(e) {
if (e.key.length == 1 && e.key.match(/[^0-9'".]/)) {
return false;
};
})
$(document).on('click', '.plus_and_minus', function() {
var $input = $(this).parent().find('input');
var count = parseInt($input.val());
if ($(this).hasClass('minus')) {
count = count <= 1 ? 30 : count - 1;
$input.val(count);
$('#setinputtwo').val(count);
} else {
count = count >= 30 ? 1 : count + 1;
$input.val(count);
$('#setinputtwo').val(count);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="minus plus_and_minus glyphicon glyphicon-minus coloriconmodal positionforlabel">-</a>
<input type="text" class="imputssettingmodal" id="setinputone" value="1" size="3" />
<a href="#" class="plus plus_and_minus glyphicon glyphicon-plus coloriconmodal">+</a>
<input type="text" class="imputssettingmodal positionforlabeltwo" id="setinputtwo" value="1" size="3" disabled/>
Только цифры, сразу дублирование во второй input
. До 30.
jQuery(function($) {
var anchor = 0;
$('#setinputone').on('input', function(){
var val = $(this).val().replace(/[^0-9]/g, "");
$(this).val(val);
$('#setinputtwo').val(val);
var num = $(this).val().length;
if(val>30 || num > 2){
val = 30;
$(this).val(val);
$('#setinputtwo').val(val);
}
});
$(document).on('click', '.plus_and_minus', function() {
var $input = $(this).parent().find('input');
var count = parseInt($input.val());
if ($(this).hasClass('minus')) {
count = count <= 1 ? 30 : count - 1;
$input.val(count);
$('#setinputtwo').val(count);
} else {
count = count >= 30 ? 1 : count + 1;
$input.val(count);
$('#setinputtwo').val(count);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="minus plus_and_minus glyphicon glyphicon-minus coloriconmodal positionforlabel">-</a>
<input type="text" class="imputssettingmodal" id="setinputone" value="1" size="3" />
<a href="#" class="plus plus_and_minus glyphicon glyphicon-plus coloriconmodal">+</a>
<input type="text" class="imputssettingmodal positionforlabeltwo" id="setinputtwo" value="1" size="3" disabled/>
А вот еще один вариант. Он защищает еще и от вставки из буфера обмена
jQuery(function($) {
$(document).on('keypress', '#setinputone', function(e) {
if (e.key.match(/[^0-9]/)) {
return false;
};
var val = this.value;
val = val.substring(0, this.selectionStart) + e.key + val.substring(this.selectionEnd)
var intVal = parseInt(val, 10);
if (intVal < 0 || intVal > 30)
return false;
$('#setinputtwo').val(intVal);
});
$(document).on('input', '#setinputone', function(e) {
var val = (!this.value.match(/^\d+$/)) ? -1 : parseInt(this.value, 10);
if (val < 1) {
val = 1;
this.value = val;
} else if (val > 30) {
val = 30;
this.value = val;
}
$('#setinputtwo').val(val);
});
$(document).on('click', '.plus_and_minus', function() {
var $input = $(this).parent().find('input');
var count = parseInt($input.val(), 10);
var delta = ($(this).hasClass('minus')) ? -1: 1;
count = ((count - 1 + delta) % 30) + 1;
if (count <= 0)
count += 30;
$input.val(count);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="minus plus_and_minus glyphicon glyphicon-minus coloriconmodal positionforlabel">-</a>
<input type="text" class="imputssettingmodal" id="setinputone" value="1" size="3" />
<a href="#" class="plus plus_and_minus glyphicon glyphicon-plus coloriconmodal">+</a>
<input type="text" class="imputssettingmodal positionforlabeltwo" id="setinputtwo" value="1" size="3" disabled/>
Ввод вы фильтруете (кстати неправильно - вы зачем-то разрешаете ввод кавычек, но запрещаете клавиши перемещения курсора). А вот введенное значение не проверяете никак
jQuery(function($) {
$(document).on('keypress', '#setinputone', function(e) {
if (e.key.match(/[^0-9]/)) {
return false;
};
var val = this.value;
val = val.substring(0, this.selectionStart) + e.key + val.substring(this.selectionEnd)
var intVal = parseInt(val, 10);
if (intVal < 0 || intVal > 30)
return false;
$('#setinputtwo').val(intVal);
});
$(document).on('click', '.plus_and_minus', function() {
var $input = $(this).parent().find('input');
var count = parseInt($input.val(), 10);
if ($(this).hasClass('minus')) {
count = count <= 1 ? 30 : count - 1;
$input.val(count);
$('#setinputtwo').val(count);
} else {
count = count >= 30 ? 1 : count + 1;
$input.val(count);
$('#setinputtwo').val(count);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="minus plus_and_minus glyphicon glyphicon-minus coloriconmodal positionforlabel">-</a>
<input type="text" class="imputssettingmodal" id="setinputone" value="1" size="3" />
<a href="#" class="plus plus_and_minus glyphicon glyphicon-plus coloriconmodal">+</a>
<input type="text" class="imputssettingmodal positionforlabeltwo" id="setinputtwo" value="1" size="3" disabled/>
А вот ещё один вариант
<form>
<input type=number min=1 max=30 value=1 step=1 required=true/>
<input type=submit>
</form>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
При запуске следующего кода все работает как и ожидается, но только один разЗатем browserSync отказывается перезапускать браузер, хотя в консоли...
Опять ошибка с ботом :TypeError: Cannot read property 'name' of undefined