自動設置文本框的大小在頁面上加載到它的內容

Question

我有一個窗體中有大量的文本框，而不是手動設置每個文本框的大小，我希望我可以設置大小的內容文本框在頁面加載。

我已經找到了一個很好的自動增長腳本這裏 Is there a jQuery autogrow plugin for text fields?

，但不知道如何使它們預設的小，如果那裏有說，在文本框中只有一個字符

感謝

Answer 1

是的，你可以

$("input").each(function(){ 
    var myLength = $(this).val().length; 
    if(myLength == 1){ 
     $(this).attr('size', myLength); 
     $(this).attr('class', 'mini'); 
    }else{ 
     $(this).attr('size', myLength);  
    } 

}); 

和CSS類做到這一點：

.mini{ 
    width:10px; 
} 

fiddle上的示例。

希望它有幫助！

Answer 2

試試下面的事情，如果我們經過一些人物說的限制將取代輸入域textarea的，看下面的代碼：

$(".input_text").each(function(index, obj){ 
    var txt = $(this), txtLength = txt.val().length; 
    if(txtLength <= 1){ 
     txt.height("25px"); 
    }else{ 
     var txtarea = $("<textarea/>"); 
     txt.replaceWith(txtarea.val(txt.val())); 
    } 
}); 

工作示例這裏：http://jsfiddle.net/tFDNx/2/

Answer 3

您可以使用任何他們這的一切工作正常

1）<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

2）var inputEl = document.getElementById("theInput");

function getWidthOfInput() { 
    var tmp = document.createElement("span"); 
    tmp.className = "input-element tmp-element"; 
    tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
    document.body.appendChild(tmp); 
    var theWidth = tmp.scrollWidth; 
    document.body.removeChild(tmp); 
    return theWidth; 
    } 

    function adjustWidthOfInput() { 
    inputEl.style.width = getWidthOfInput() + "px"; 
    } 

    adjustWidthOfInput(); 
    inputEl.onkeyup = adjustWidthOfInput; 

3）// HTML // jQuery的

$(function(){ 
    $('#input').keyup(function(){ 
    $('<span id="width">').append($(this).val()).appendTo('body'); 
    $(this).width($('#width').width() + 2); 
    $('#width').remove(); 
    }); 
});