解决type=number的input可以输入+-e符号的情况

在前端开发中,当使用input[type=number]时,用户仍可能输入+-e等非数字字符。本文介绍了四种方法来解决这个问题:1) 值改变时替换非数字内容,但存在缺陷;2) 手动保存旧值并监听按键,避免值被立即清除;3) 使用键入事件拦截,作为最佳实践;4) 创建自定义输入标签以实现更精细的控制。通过这些方法,可以确保用户只能输入预期的数字内容。
摘要由CSDN通过智能技术生成

在输入框input标签设置type="number"的目的就是为了规避用户输入数字以外的内容。然而,在html的w3c标准里,e认定为自然对数中的无理数常量,+-则是表示正负,生产中有时不需要甚至禁止输入这些。

1.值改变时,替换其中非数字内容(效果不好)

为输入框绑定事件,去除掉其中非数字和小数点部分。
onchange事件其实更接近于onblur,失焦且新旧值不等时才触发。oninput可做到输入单个字符就触发。

此外,网上还有使用onkeyup方法,监听按键抬起事件,除CtrlAltShiftEsc等键。(说关机键的请回炉重造。)
值得注意的是,onkeydown时value尚未改变,无法监听值并替换。

function setNum(e){
   
	e.value=e.value.replace(/[^0-9.]/g,"");
}

在各个方法中,输入+-e后,监听input的值,不论是e.value还是$(e).val(),打印出来都是空,而(不替换符号时)页面上有显示内容。
起初以为是jQuery或者项目中的其他插件的影响,后单独起一个demo,效果也是如此。

<input type="number" oninput="setNum(this)">
function setNum(e){
   
	console.log(e.value)<
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤卓杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值