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

    xiaoxiao2025-01-10  7

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

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

    原本打算是用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下也生效了,搞定。

    转载请注明原文地址: https://ju.6miu.com/read-1295353.html
    最新回复(0)