input 輸入框 propertychange

做搜索功能的時候，經常遇到輸入框檢查的需求，最常見的是即時搜索，今天好好小結一下。

即時搜索的方案：

（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>

 

js

<script>
    $(function () {
        $("#cartInput").bind('input propertychange',function () {
            var text = $("#cartInput").val();
            text = text.replace(/[^\d]/g,'');
            console.log(text)
        })
    })
</script>

　　

 

用vue寫的時候，實時的方法可以為：

<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)
            },