Question

我希望数字类型html输入元素通过键盘进行输入，并且如果最后一次按下的数字超过最大值，则应该放弃最后一次按下的键。

我尝试使用javascript来做到这一点。

这是代码

<input type="number" id = 'customer-age-input' max="120" min="0" onkeypress="javascript: if (int(this.value) > int(this.max)) this.value = 0;">

实际发生的事情与预期的不同。我输入的是“ 123”，“ 1234”等任何输入值，但是当我按向上箭头键时，它不会增加值，因为默认情况下，当值小于max时，它不会增加值。另外，当我按向下箭头键时，它会减小到最大值。

Answer 1

int不是当前版本的JavaScript的内置函数。语法为parseInt(value);

在此处了解有关parseInt的信息-> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

您可以使用oninput事件来检测值何时更改。在此可以检查值并根据需要进行调整。 但是，重要的是要注意，一旦达到最大值或最小值，控件上的箭头将不会触发此事件。因此，您不能仅使用箭头键将其从MAX_VALUE滚动到MIN_VALUE。

在此处了解更多-> What events does an <input type="number" /> fire when it's value is changed?

将所有内容放在一起...

HTML

<input type="number" id="customer-age-input" max="120" min="0" oninput="checkValue(this);" />

JavaScript

// this function will convert a string to an integer
// beware this will throw an exception if the value does not parse properly
function int(value) {
    return parseInt(value);
}

// this checks the value and updates it on the control, if needed
function checkValue(sender) {
    let min = sender.min;
    let max = sender.max;
    let value = int(sender.value);
    if (value>max) {
        sender.value = min;
    } else if (value<min) {
        sender.value = max;
    }
}

我只是出于您的设计才创建了int函数。您可以只使用parseInt代替上面代码中的自定义int函数。新代码如下所示：

JavaScript

// this checks the value and updates it on the control, if needed
function checkValue(sender) {
    let min = sender.min;
    let max = sender.max;
    // here we perform the parsing instead of calling another function
    let value = parseInt(sender.value);
    if (value>max) {
        sender.value = min;
    } else if (value<min) {
        sender.value = max;
    }
}

Answer 2

仅当使用箭头键或使用输入标签上的向上或向下按钮插入该值时，最大值才起作用。提交表单时也会对其进行验证，但是如果您要强制浏览器不让用户输入更大的值，则不能输入最大值，则可以在keydown事件中检查输入值，如果新值将超过最大值，则您可以为事件添加preventdefault。这样，将不会插入值。这是使用jquery进行此技巧的演示代码。您还可以通过相应地更改条件来对最小值进行相同的操作。

    
          `$('input[type=number]').on('keydown' , (event)=>{
                let key = event.key;
                let value = event.target.value;
                let new_value = Number(value + key);
                let max = Number(event.target.max);
                if(new_value > max){ event.preventDefault(); }
          });`

如何在HTML输入类型='数字'中修复超过最大值的输入？

2 个答案: