javascript - 如何修复 html 输入类型 = 'number' 中超过最大值的输入？

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' 等，但是当我按下向上箭头键时，它不会增加值，因为当值小于最大值时默认情况下它会这样做。此外，当我按下箭头键时，它会将其减小到最大值。

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;
    }
}