jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

   jQuery计算文本宽度的原理是利用html提供的

标签，向dom中动态添加
标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的
标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看
标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 
标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是，计算文本长度时文本里面最好不要有其他标签。以下是实现代码：
 
  
 
 
  
 
   
 
    //获取文本宽度 
    
      
    var 
      
    textWidth 
     =  
    function 
    ( 
    text 
    ){ 
     
          
    var 
      
    sensor 
     = $ 
    ( 
    ' 
    
 
    ' 
    +  
    text 
     + 
    ' 
     
    ' 
    ) 
    . 
    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 
    ())) 
    ;
      
    }) 
    ;