我希望数字类型的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”等，但是当我按下向上箭头键时，它不会像默认值小于最大值时那样增加值。另外，当我按下箭头键时，它会将其减小到最大值。
【问题讨论】：
标签： javascript html css
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;
}
}
【讨论】：
仅当使用箭头键或使用输入标签上的向上或向下按钮插入值时，最大值才有效。 提交表单时也会对其进行验证，但如果您想强制浏览器不让用户输入任何大于最大值的值，那么您可以在 keydown 事件中检查输入值，如果新值将超过最大值然后您可以为事件添加 preventdefault。这样就不会插入值。这是使用 jquery 执行此技巧的演示代码。 您也可以通过相应地更改条件来对最小值执行相同的技巧。
`$('input[type=number]').on('keydown' , (event)=>{ 让键 = event.key; 让值 = 事件.目标.值； 让 new_value = Number(value + key); 让 max = Number(event.target.max); if(new_value > max){ event.preventDefault(); } });`【讨论】：