jQuery計算文本寬度和input標籤根據輸入字元動態自適應寬度的實現

標籤：

jQuery計算文本寬度的原理是利用html提供的<pre>標籤，向dom中動態添加<pre>標籤，標籤裡的內容就是要測試長度的文本，擷取完長度之後再刪除剛才添加的<pre>標籤，從而可取到文本的大概長度了。為什麼要用標籤而不用其他標籤呢，那來看看<pre>標籤的特性吧：pre 元素可定義預格式化的文本。被包圍在 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;    };

 

 

有了上面這個函數，input標籤根據輸入字元動態自適應寬度的實現就簡單了：

 

//input寬度自適應    $("input").unbind(‘keydown‘).bind(‘keydown‘, function(){        $(this).width(textWidth($(this).val()));    });

 

jQuery計算文本寬度和input標籤根據輸入字元動態自適應寬度的實現