最近公司在做微信商城的项目,在结算页面有个使用红包的功能,要求是,用户输入红包数量,要求输入数值后直接开始校验,而不是全部输入完确定后才校验。
原本以为是很简单的功能,做了之后才发现,比我刚开始想的要有意思得多。
原本打算是用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中,试了下完全ok,替换成我的校验方法,也ok,此处窃喜一下,简单搞定功能,但是接下来的事情告诉我,我还是太年轻了,naive。。。。。。ie下不兼容。
马蛋,百度查了查,貌似ie有自己的方法,onpropertychange,呵呵,貌似又看到曙光了。
<input type="text" id="a" value="50" οninput="b.value=parseInt(a.value))" onpropertychange="x.value=parseInt(a.value)"> <input id="b">试了下,ie下也生效了,搞定。