html表单input元素输入立即校验的方法

最近公司在做微信商城的项目,在结算页面有个使用红包的功能,要求是,用户输入红包数量,要求输入数值后直接开始校验,而不是全部输入完确定后才校验。

原本以为是很简单的功能,做了之后才发现,比我刚开始想的要有意思得多。

原本打算是用js处理,用onchange事件,但是onchange事件的生效时间是在元素失去焦点后,pass......

分析下,需要在获取焦点后就监视input元素,每当其value变化时,就要校验。

于是,脑洞大开,想了个歪招,先给input元素加个焦点事件,然后是键盘事件监听内容,把校验方法写在键盘事件中,然后写失去焦点事件,把键盘事件干掉。功能实现了,兼容性貌似也可以,but,好坑爹有木有。。。。。简单的一个功能,用了三个事件,就不上代码了,自己都不好意思。

这个方案只能作为备选,继续想。

百度了下,去找找表单的事件,属性,找找灵感。

叮。。。。。。

oninput事件出现了

<pre name="code" class="html"><input type="text" id="a" value="50" οninput="b.value=parseInt(a.value)">
<input id="b">
 a元素输入时,调用方法,把值写到b
                
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值