Javascript 如何修复html输入类型=';编号';?
我希望数字类型的html输入元素通过键盘进行输入,如果最后一次按下的数字超过了最大值,那么最后一次按键应该被丢弃 我尝试使用javascript来实现这一点 这是密码Javascript 如何修复html输入类型=';编号';?,javascript,html,css,Javascript,Html,Css,我希望数字类型的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;"> 实际发生的事情与预期
<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”等。但当我按向上箭头键时,它不会像默认值小于最大值时那样增加值。此外,当我按向下箭头键时,它会将其减少到最大值。
int
不是当前版本JavaScript的内置函数。语法是parseInt(value)
阅读关于parseInt
此处->
您可以使用oninput
事件来检测值何时更改。如果需要,您可以在此处检查值并进行调整但是,必须注意一旦达到最大或最小值,控件上的箭头将不会触发此事件。所以你不能用箭头键把它从最大值滚动到最小值
请在此处阅读更多->
把这些放在一起
HTML
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;
}
}
// 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;
}
}
//此函数将字符串转换为整数
//请注意,如果值没有正确解析,这将引发异常
函数int(值){
返回parseInt(值);
}
//这将检查值并在需要时在控件上更新它
函数校验值(发送方){
设min=sender.min;
设max=sender.max;
让value=int(sender.value);
如果(值>最大值){
sender.value=min;
}else if(valueMax value)仅在使用箭头键或使用输入标签上的向上或向下按钮插入值时才起作用。
提交表单时也会进行验证,但如果您想强制浏览器不允许用户输入任何大于最大值的值,则可以在keydown事件中检查输入值,如果新值将超过最大值,则可以为事件添加默认值。这样,将不会插入值。这是演示c使用jquery实现这一技巧的ode。
通过相应地更改条件,也可以对“最小值”执行相同的操作
`$('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(); }
});`
`$('input[type=number]')。在('keydown',(事件)=>{
让key=event.key;
让值=event.target.value;
让新值=数字(值+键);
设max=Number(event.target.max);
如果(new_value>max){event.preventDefault();}
});`
什么是int()?你是自己写的还是你希望它能把值转换成整数?我希望它能把值转换成整数!我真的很感激你能帮我解决这个问题!你的答案很好!但是有一个小问题。当我键入v时,输入字段也允许输入大于最大值的值值。你知道为什么会发生这种情况吗?我已经在IE11、Chrome 73和Firefox 60中进行了测试。当输入大于max的值时,该值被设置为0。代码不允许大于max。你在控制台中是否遇到任何错误?仅代码的答案很少有帮助。请评论你的代码或解释为什么会出现这种情况这个问题的解决办法。
`$('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(); }
});`