簡單的input自適應寬度

   jQuery計算文本寬度的原理是利用html提供的<pre>標籤，向dom中動態添加<pre>標籤，標籤裏的內容就是要測試長度的文本，獲取完長度以後再刪除剛纔添加的<pre>標籤，從而可取到文本的大概長度了。爲何要用標籤而不用其餘標籤呢，那來看看<pre>標籤的特性吧：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符;而文本也會呈現爲等寬字體。 <pre>標籤的一個常見應用就是用來表示計算機的源代碼。須要注意的地方是，計算文本長度時文本里面最好不要有其餘標籤。如下是實現代碼：

 

//獲取文本寬度
     var   textWidth  =  function ( text ){  
         var   sensor  = $ ( ' <pre> ' +  text  + ' </pre> ' ) . css ({ display :  ' none ' }) ; 
        $ ( ' body ' ) . append ( sensor ) ; 
         var   width  =  sensor . width () ;
         sensor . remove () ; 
         return   width ;
     } ;

 

有了上面這個函數，input標籤根據輸入字符動態自適應寬度的實現就簡單了：

 

//input寬度自適應
    $ ( " input " ) . unbind ( ' keydown ' ) . bind ( ' keydown ' ,  function (){
        $ ( this ) . width ( textWidth ( $ ( this ) . val ())) ;
     }) ;