简单的input自适应宽度

时间 2019-11-10

标签简单 input 自适应宽度栏目 CSS 繁體版

原文原文链接

jQuery计算文本宽度的原理是利用html提供的<pre>标签，向dom中动态添加<pre>标签，标签里的内容就是要测试长度的文本，获取完长度以后再删除刚才添加的<pre>标签，从而可取到文本的大概长度了。为何要用标签而不用其余标签呢，那来看看<pre>标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本一般会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。须要注意的地方是，计算文本长度时文本里面最好不要有其余标签。如下是实现代码：css

 
   //获取文本宽度 
   
      
   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 
   ())) 
   ;
      
   }) 
   ; 
  