很多時候文字框輸入的內容是不固定的，有時候輸入的內容多一些需要寬一些有時候輸入的內容少一些需要窄一些，所以需要設定input的寬度自適應。

工具原料：編輯器、jQuery

1、解決寬度自適應的思路是使用jQuery來監聽輸入事件，進而進行動態的改變input的寬度，實現input寬度自適應的效果。

2、首選獲取文字的寬度，利用pre 元素可定義預格式化的文字，被包圍在 pre 元素中的文字通常會保留空格和換行符;而文字也會呈現為等寬字型，簡單的程式碼示例如下：

var textWidth = function(text){

var sensor = $("

"+ text +"

$("body").append(sensor);

var width = sensor.width();

sensor.remove();

return width;

};

3、根據以上獲取到的文字的寬度來給input繫結事件動態改變寬度，簡單的程式碼示例如下：

$("input").unbind("keydown").bind("keydown", function(){

$(this).width(textWidth($(this).val()));

});