先來最后結果：DEMO
介紹一下如何讓一個文本框的寬度能夠隨着文本框中的內容的寬度增長而增長，也就是能夠實現寬度自適應效果。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="skyFi.github.io/skylor" /> <title>skyFi.github.io/skylor</title>
<script type="text/javascript">
window.onload=function(){
var otxt=document.getElementById("txt");
otxt.onkeyup=function(){
this.size=(this.value.length>4?this.value.length:4);
}
}
</script>
</head>
<body>
<input type="text" id="txt" size="4"/>
</body>
</html>
查看演示：input文本框實現寬度自適應
以上代碼實現了我們的要求，代碼非常的簡單，注冊onkeyup事件處理函數，此函數可以判斷當前輸入內容的長度是否大於默認長度，如果不大於，則文本框的長度就是4，否則就是輸入內容的長度。
但是，這個方式實現了英文輸入能夠很好地工作，可是當遇到使用中文輸入法的時候就不是那么的好用了。因為一般中文輸入法都是先有英文，按下space后才把文字輸入到輸入框的，這會照成計算錯誤。
而且這個一般不能滿足大多數人的需求，於是我又弄一種並組裝了下：請看代碼
; (function ($) { $.fn.autoFit = function() { var $this = $(this); var oldWidth = parseInt($this.css('width')); $this.keydown(function (event) { var $this = $(this); setTimeout(function() { var val = $this.val().replace(/ /g, ' '); var fontSize = $this.css('font-size'); var fontFamily = $this.css('font-family'); var padding = $this.outerWidth() - $this.width(); var contentWidth = $('<span id="autowidthforinputtext" style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; font-family: ' + fontFamily + '; display: block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth(); var newWidth = ((contentWidth + padding) > oldWidth) ? (contentWidth + padding) : oldWidth; $('#autowidthforinputtext').remove(); $this.width(newWidth + 'px'); }, 0); }); return $this; }; })(this['jQuery']); $('#txt').autoFit();
於是這個就可以很好地工作了，恩，自己很滿意。測試路子. github源碼
想了下還是簡單分析下吧：
1、這是Q的fn擴展，好處是可以直接JQuery對象用’.‘就能調用我的函數。
2、采用閉包避免命名污染，同時包裝記錄最開始用戶定義的input寬度。
3、巧妙使用0延時的setTimeout使得插件很好地支持了中文輸入法帶來的之前的BUG。至於為什么，我的另一篇文章中有介紹，setTimeout執行隊列啥的。
4、對輸入的空格做了轉碼處理。