使input文本框隨其中內容而變化長度的方法

最近在做商城的前端界面,遇到一個問題,就是使input的寬度能隨着輸入的內容而跟着變化,剛開始的時候用的是change事件,但是change事件要失去焦點之后才會出現效果,但是我要的是能實現邊輸入邊改變寬度的效果。於是查了資料之后,發現了一個事件,很是好用。

propertychange(屬性改變事件):監聽input里面的字符變化,該事件不僅僅會監聽到input的value屬性，還包括其他標簽的屬性各種屬性發生變化都會發生該事件,比如span元素的style屬性。在事件發生時還可以用event.propertyName訪問到改變的屬性名。在網上查到說這個屬性是IE專屬的,但是我在其他瀏覽器中,這個屬性也是一樣起了效果。

廢話不多說,現在附上我實現的代碼段吧:

 $(function(){
                //propertychange監聽input里面的字符變化,屬性改變事件
                $('.zy-price').bind('input propertychange', function() {
                    var $this = $(this);
                    console.log($this);
                    var text_length = $this.val().length;//獲取當前文本框的長度
                    var current_width = parseInt(text_length) *16;//該16是改變前的寬度除以當前字符串的長度,算出每個字符的長度
                    console.log(current_width)
                    $this.css("width",current_width+"px");
                });
            })