創建一個自動擴展寬度的文本框？

Question

我該如何去創建一個自動擴展寬度的文本框來適應它的內容？

我一直在尋找大量有關基於高度的展開的信息，但寬度卻不多。

我也希望它適用於頁面上的每個文本框，而不僅僅是特定的文本框。

Answer 1

不知道這是你的想法，但不應該這項工作？

<script language="javascript"> 
function expand(f) 
{ 
    f.size = f.size + 1; 
} 
</script> 

<input type="text" size="20" onkeyup="expand(this)" /> 

Answer 2

如果你想退格鍵的操作使用本：

<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20"> 

如果你想退格鍵操作，而忽略箭頭鍵使用這一個：

<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6"> 

Answer 3

我認爲一個更好的解決方案將檢查文本的長度，如果文本太長，則修改文本框，而不是檢查不應觸發擴展的每種類型的關鍵事件。舉例：

<script type="text/javascript"> 
function expand(textbox){ 
    var minSize = 20; 
    var contentSize = textbox.value.length; 
    if(contentSize > minSize) 
    { 
     textboxSize = contentSize; 
    } 
    else 
    { 
     textboxSize = minSize; 
    } 
} 
</script> 
<input type="text" size="20" onkeyup="expand(this)" />