調整輸入大小以適應其內容

Question

我不在乎某個特定的技術，它可能是JS，CSS甚至是一些非標準和邪惡的html屬性。我只想讓input在用戶鍵入右邊框時變大。

Answer 1

也許別人有更好的辦法，但你可以試試這個：

例子：http://jsfiddle.net/aAueA/1/

var input = document.getElementsByTagName('input')[0]; 

input.onkeypress = input.onkeydown = function() { 
    this.size = (this.value.length > 10) ? this.value.length : 10; 
}; 

這將其設置在10的最小尺寸，如果你超越10擴展字符。

也許最適合具有固定寬度的字體：

input { 
    font-family:Courier; 
} 

Answer 2

讓瀏覽器做的寬度計算使用div與contenteditable設置爲true。

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div> 

應該有與瀏覽器支持http://caniuse.com/#feat=contenteditable

Answer 3

您還可以創建div元素沒有任何問題，你的輸入風格複製到它和使用它的尺寸調整輸入。 （選擇多種用途this solution）。

var input = $('input'), 
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body'); 

['font-size', 'font-style', 'font-weight', 'font-family', 
'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) { 
    dummy.css(index, input.css(index)); 
}); 

input.on('input', function() { 
    dummy.html(this.value); 
    input.width(dummy.width()); 
}); 

UPD：最好使用pre而不是div來跟隨空格大小。