做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下。
即时搜索的方案:
(1)change事件 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur)
(2)keypress 恩,还好。。。。。就是能监听键盘事件,鼠标复制黏贴操作他就无能为力的赶脚了。。。。。
(3)propertychange(ie)和input事件
input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
propertychange,只要当前对象属性发生改变。
下面我们用jquery 来实现input 等同于placeholder 这个属性的效果
1 2 3 4 | < div class="enterprise-list"> < label >银行卡号:</ label > < input type="text" placeholder="请输入16或19位银行卡号" class="enterprise-inp" id="cartInput"> </ div > |
js
1 2 3 4 5 6 7 8 9 | < script > $(function () { $("#cartInput").bind(‘input propertychange‘,function () { var text = $("#cartInput").val(); text = text.replace(/[^d]/g,‘‘); console.log(text) }) }) </ script > |
用vue写的时候,实时的方法可以为:
1 | < input type="text" v-model="bankcard" class="enterprise-inp" v-on:input="cartInput"> |
1 2 3 4 | cartInput:function () { this.bankcard=this.bankcard.replace(/[^d]/g,‘‘); console.log(this.bankcard) }, |