Question

我正在使用此堆栈问题作为验证输入的基础。我有一个范围滑块，用户可以在其中输入8到24之间的数字。如果用户输入的数字大于24，则应该转到24。如果用户输入的数字小于8，则应该转到8。 / p>

我遇到的问题是，如果用户输入的数字大于24，则它会自动转到8。有什么想法吗？

Prevent user from typing in input at max value

$('#interestValue').on('keyup keydown', function(e){
   if ($(this).val() > 24 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(24);
       doMath();
    }

     if ($(this).val() < 8
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(8);
       doMath();
    }
});

Answer 1

除了需要确保比较数字而不是字符串之外，您还不能安全地在keyup，keydown或input上执行此操作-因为这些事件会触发每次击键，用户都不可能输入（例如）“ 23”，因为当他们键入第一个“ 2”时，它将立即变为“ 8”。

请改用change事件，该事件使用户可以在从其下方开始更改输入之前完成其预期的输入。（这也使您可以简化代码，因为您不再需要检查'backspace'和'delete'键事件。）

$('#interestValue').on('change', function(e){
   e.preventDefault();
   var val = Number($(this).val()); // ensure you're not accidentally comparing strings
   if (val > 24) {
       $(this).val(24);
    } else if (val < 8) {
       $(this).val(8);
    } else if (isNaN(val)) {
       console.log("Input wasn't a number... you probably want to handle this case")
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="interestValue">

Answer 2

我强烈建议您在此处创建一个本地Web组件。我将向您展示一个自定义内置组件的基本设置，该组件的内置组件已经运行并且没有外部依赖项：

class DecimalInput extends HTMLInputElement {
  constructor() {
    super();
    this.addEventListener('change', (e) => {
      const val = parseFloat(this.value),
            min = parseFloat(this.min),
            max = parseFloat(this.max),
            step = parseFloat(this.step);
            
      if (val%step !== 0) {
        this.value = Math.round(val/step) * step
      }
      if (val > max) {
        this.value = max
      }
      if (val < min) {
        this.value = min
      }
    })
  }
}

customElements.define('decimal-input', DecimalInput, { extends: 'input' })

<label><input type="number" is="decimal-input" min="8" max="24" step="1" value="16" /> Allows input from 8-24</label>
<hr />
<label><input type="number" is="decimal-input" min="0" max="1024" step="16" value="16" /> Allows input from 0-1024, in 16-steps</label>

该组件已经非常接近您的要求。以此为基础进行自己的完善。

Answer 3

我建议通过另一个事件（例如“模糊”）来处理用户的值。使用模糊事件，您可以在用户将焦点更改到另一个字段时触发计算，该操作更易于控制，因为您在尝试其他内容之前需要等待用户输入。或者，您始终可以在事件函数内部或在用于验证当前用户输入值的外部函数中尝试使用setTimeout。不过，请务必小心，当前输入的值很可能是用户先前输入的值。

Answer 4

我认为如果有帮助，我会在这里发布我的答案。我能够完成这项工作-并非以最友好的开发方式，而是以良好的技巧。

$('#interestValue').on('keyup keydown', function(e){

    if ($(this).val() > 24 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
    ) {
       e.preventDefault();
       $(this).val(24);
       doMath();
    }

     if ($(this).val() < 8 && $(this).val() > 2
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(8);
       doMath();
    }
});

防止用户输入数值范围以外的数字

4 个答案: