в input только цифры от 1 до 30

221
08 августа 2018, 16:00

имеются два 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/>

Answer 1

Только цифры, сразу дублирование во второй 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/>

Answer 2

А вот еще один вариант. Он защищает еще и от вставки из буфера обмена

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/>

Answer 3

Ввод вы фильтруете (кстати неправильно - вы зачем-то разрешаете ввод кавычек, но запрещаете клавиши перемещения курсора). А вот введенное значение не проверяете никак

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/>

Answer 4

А вот ещё один вариант

<form> 
  <input type=number min=1 max=30 value=1 step=1 required=true/> 
  <input type=submit> 
</form>

READ ALSO
Код с итератором и генератором в js ломает browserSync

Код с итератором и генератором в js ломает browserSync

При запуске следующего кода все работает как и ожидается, но только один разЗатем browserSync отказывается перезапускать браузер, хотя в консоли...

228
Помогите пожалуйста JS discord.js

Помогите пожалуйста JS discord.js

Опять ошибка с ботом :TypeError: Cannot read property 'name' of undefined

175
Запись числа с любым разделителем

Запись числа с любым разделителем

Вообщем, есть форма обычная от yii2:

184
Native javascript задача [дубликат]

Native javascript задача [дубликат]

На данный вопрос уже ответили:

188