input框只允许输入正整数最佳方案(补充:两位小数)

背景

管理后台需要以ID进行搜索,如果前端不限制从而输入了英文或中文,后端肯定是会报错的。所以我们需要在前端限制运营的输入

number

最先想到的肯定是html5中input框的numbernumber类型的输入框中我们无法输入英文以及中文

<input type="number" min=1 step=1>

html5 number类型的input框右侧自带上下箭头,我们通过min=1以及step=1限制了最小值以及每次变化的量。
但是这样仍然不满足我们的要求,因为还是可以手动输入-.、自然对数e等,不能完全做到限制正整数

onkeypress

既然仅仅通过number是无法做到正整数的,那我们是否可以通过监控键盘按下事件来做限制呢?

<input type="text" 
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

看起来没有什么问题 只允许一些功能键以及0-9 但是…中文输入法下是不会触发onkeypress事件的
那么keydown呢?很不幸 在中文输入法下返回的keyCode都是229,无法做出区别
keyupkeyup倒是可以拿到正确的keyCode,但是keyup是已经发生在input框修改后的事件了,这时候也无法阻止了。
ps:执行顺序keydown - > keypress - > keyup

oninput

尝试了2种方法都有缺陷,那我们可不可以通过监听oninput事件,如果输入的值不在0-9,就替换为空字符串呢?

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');">

chrome下验证没有问题,大功告成!

补充:限制两位小数

classtwo-decimalinput框添加限制事件

        $(".two-decimal").on("input",function(e){
          e.target.value = e.target.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符

          e.target.value = e.target.value.replace(/^\./g,""); //验证第一个字符是数字而不是.

          e.target.value = e.target.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.

          e.target.value = e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只允许输入一个小数点

          e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        });
  • 18
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值