input寬度自適應？

很多時候文本框輸入的內容是不固定的，有時候輸入的內容多一些需要寬一些有時候輸入的內容少一些需要窄一些，所以需要設置input的寬度自適應。工具原料：編輯器、jQuery1、解決寬度自適應的思路是使用jQuery來監聽輸入事件，進而進行動態的改變input的寬度，實現input寬度自適應的效果。2、首選獲取文本的寬度，利用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; };

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

$("input").unbind('keydown').bind('keydown', function(){ $(this).width(textWidth($(this).val())); });