1. 程式人生 > >jQuery計算文字寬度和input標籤根據輸入字元動態自適應寬度的實現

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())); });