there are two input'a, one of them duplicates the second, the numbers switch when you click on + and - but you also need the ability to write the value in the field yourself, this value should be limited, just from 1 to 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/>

  • what errors in the console? - Roman C
  • there are no mistakes, that's just the point, it just allows me to enter any number, but when I click the same +, it returns to 30, but I need it so that it is not possible - Kirill Bulgakov
  • ru.stackoverflow.com/a/453060/178988 - Qwertiy ♦
  • "numbers ... up to 30" - thirty number system? - Igor

4 answers 4

Only numbers, immediately duplication in the second input . Up to 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/>

    And here is another option. It also protects against pasting from the clipboard.

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

      You filter the input (by the way it is wrong - for some reason you allow entering quotes, but prohibit the cursor movement keys). But the entered value does not check

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

      • When entering, I can go further on the page, and the value in input disabled will differ from the entered one. - Dzianis Sadouski
      • Damn, well, add one line of code. Updated the answer - Anton Shchyrov

      And here's another option

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