jQuery - 基於值的寬度調整表單輸入大小？

Question

是否可以獲取輸入的值寬度並動態調整輸入大小以適合該值？

下面是一個例子：

http://jsfiddle.net/bzBdX/2/

Answer 1

這是第四ËjQuery代碼：

$('input').each(function(){ 
var value = $(this).val(); 
var size = value.length; 
// playing with the size attribute 
//$(this).attr('size',size); 

// playing css width 
size = size*2; // average width of a char 
$(this).css('width',size*3); 

})​; 

http://jsfiddle.net/bzBdX/7/

Answer 2

東西簡單：

$('#resizeme').keydown(function(){ // listen for keypresses 
var contents = $(this).val();  // get value 
var charlength = contents.length; // get number of chars 
newwidth = charlength*9;   // rough guesstimate of width of char 
$(this).css({width:newwidth});  // apply new width 
});​ 

你可以改變個人的喜好/文字大小

例乘數：http://jsfiddle.net/bzBdX/6/

Answer 3

$(function(){ 
    $("input").keyup(function(){ 
     $(this).stop().animate({ 
     width: $(this).val().length*7 
    },100)     
    }) 
})​ 

Answer 4

您可以檢查JS小提琴... http://jsfiddle.net/ninadajnikar/bzBdX/9/這個演示。

您更新寬度值，只要你喜歡它

Answer 5

http://jsfiddle.net/bzBdX/11/

所以我通過 插入字母跨度由它試圖計算寬度的例子，計算有寬度

(function() { 
    var mDiv = $("<span />").text("M").appendTo("body"), 
     mSize = mDiv.width(); 
    mDiv.detach(); 

    var letterSize = function(s) { 
     var sDiv = $("<span />").text("M" + s + "M").appendTo("body"), 
      sSize = sDiv.width(); 

     sDiv.detach(); 

     return (sSize - (mSize * 2)) * 0.89; 
    }; 

    $("input[data-resise-me]").each(function() { 
     var minSize = $(this).width(); 

     var resizeInput = function() { 
      var calcSize = $.map($(this).val(), letterSize); 
      var inputSize = 0; 
      $.each(calcSize, function(i, v) { inputSize += v; }); 

      $(this).width(inputSize < minSize ? minSize : inputSize); 
     }; 

     $(this).on({ keydown: resizeInput, keyup: resizeInput }); 
    }); 
}()); 

這可能是一個更好的方法。

Answer 6

這個例子中作爲在Chrome 25和Firefox 19.過測試（http://jsfiddle.net/9ezyz/）

function input_update_size() 
{ 
    var value = $(this).val(); 
    var size = 12; 

    // Looking for font-size into the input 
    if (this.currentStyle) 
     size = this.currentStyle['font-size']; 
    else if (window.getComputedStyle) 
     size = document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size'); 
    $(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500); 
    //$(this).width((parseInt(size)/2+1)*value.length); 
} 

$('input') 
    .each(input_update_size) 
    .keyup(input_update_size); 

Answer 7

我有一個jQuery插件GitHub上：https://github.com/MartinF/jQuery.Autosize.Input

它反映該輸入的值，以便它可以計算實際長度而不是猜測或提到的其他方法。

這裏你可以看到一個活生生的例子：http://jsfiddle.net/mJMpw/6/

例子：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> 

input[type="data-autosize-input"] { 
    width: 90px; 
    min-width: 90px; 
    max-width: 300px; 
    transition: width 0.25s;  
} 

你只需要使用CSS來設置最小/最大寬度，如果你想有一個不錯的效果使用的寬度的過渡。

您可以將輸入元素的data-autosize-input屬性的空格/距離指定爲json符號中的值。

當然你也可以只使用jQuery

$("selector").autosizeInput(); 

Answer 8

初始化正如@ManseUK提及。這條線爲我工作。 JQuery version 1.8

$（'＃resizeme'）。CSS（{寬度：newwidth}）;

Answer 9

基於字符數量的所有這些解決方案都非常薄弱，因爲如果不是單體字體，每個字符的寬度可能不同。我正在使用相同的字體屬性創建一個包含文本輸入值的div並解決此問題，並獲取其所需的寬度。

事情是這樣的：

function resizeInput() { 
    $('body').append('<div class="new_width">'+$(this).val()+'</div>'); 
    $(this).css('width', $('.new_width').width()); 
    $('.new_width').remove() 
} 
$('input') 
    // event handler 
    .keyup(resizeInput) 
    // resize on page load 
    .each(resizeInput); 

Answer 10

目前的答案是WAAY複雜的。繼承人快速

$('#myinput').width($('#myinput').prop('scrollWidth')) 

添加上述輸入keydown/up/press事件是微不足道的。 鉻合金測試