Question

我试图限制用户在HTML输入框中输入0到25之间的值。我已经找到了一些jquery的代码，但它分别将较小值的较大值分别转换为25和0。请修改代码： HTML输入框和jquery的代码：

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;'>

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 25) input.value = 25;
  }
</script>

Answer 1

您可以使用@ pyae-aung建议的HTML5的min和max属性。这是您的代码。不需要JQuery，只需添加例如min="0"和max="25"的属性。

请参见下面的代码。

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;' min='0' max='25'>

Answer 2

尝试一下

$('[name="obtmarks[]"]').keyup(function(){
    if(parseInt($(this).val()) > 25){
        $('#div1').html('value cannot be greater then 25');
        $(this).val('');
    }
    else if(parseInt($(this).val()) < 1)
    {
    $('#div1').html('value cannot be lower then 0');
        $(this).val('');
    }
    else
    {$('#div1').html('');}
});

#div1{
   color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required'
      maxlength="2" style='width: 120px;'>

<div id="div1"></div>

Answer 3

您可以简单地创建一个完全满足您需要的Web组件：

class MyInput extends HTMLInputElement {
  constructor(...args) {
    const self = super(...args);
    self.min = this.getAttribute('min');
    self.max = this.getAttribute('max');
    self.addEventListener('input', (e) => {
      switch (true) {
        case self.value === '':
          break;
        case self.value < self.min:
          self.value = self.min;
          break;
        case self.value > self.max:
          self.value = self.max;
          break;
      }
    })
    return self;
  }
}

customElements.define('my-input', MyInput, { extends: 'input' });

<input type="number" is="my-input" max="25" min="0" />

Answer 4

使用jQuery脚本限制输入值

您可以使用jQuery完成

<input type="number" name="quantity">

<script>
    $("input[name='obtmarks[]']").change(function() {
      number = $("input[name='obtmarks[]']").val()
       if( number <= 0 || number >= 25 ) {
           $("input[name='obtmarks[]']").val("");
           alert("Enter values in between 0 to 25");
         }
       });
</script>

Answer 5

尝试以下一项对我来说很好。使用type=tel与number相同。还有一点内联Javascript。

<!-- <input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;' > -->

<input type="tel" name='obtmarks[]' class='form-control obtmark'  required='required' style='width: 120px;'  onKeyDown="if(this.value.length==25 && event.keyCode!=8) return false;"/>

如何在HTML输入框中限制用户输入的值大于25

5 个答案:

使用jQuery脚本限制输入值