input 输入框 propertychange

原文：https://www.cnblogs.com/yuanyanbk/p/8269968.html

做搜索功能的时候，经常遇到输入框检查的需求，最常见的是即时搜索，今天好好小结一下。

即时搜索的方案：

（1）change事件触发事件必须满足两个条件：

　　a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

　　b）当前对象失去焦点(onblur)

（2）keypress 恩，还好。。。。。就是能监听键盘事件，鼠标复制黏贴操作他就无能为力的赶脚了。。。。。

（3）propertychange（ie）和input事件

input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

propertychange，只要当前对象属性发生改变。

下面我们用jquery 来实现input 等同于placeholder 这个属性的效果

html

 
          < 
          div 
          class="enterprise-list"> 
         
          < 
          label 
          >银行卡号：</ 
          label 
          > 
         
          < 
          input 
          type="text"  placeholder="请输入16或19位银行卡号" class="enterprise-inp" id="cartInput"> 
         
          </ 
          div 
          >

 
          < 
          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">`

 
          cartInput:function () { 
         
          this.bankcard=this.bankcard.replace(/[^\d]/g,''); 
         
          console.log(this.bankcard) 
         
          },