如何根據輸入的文本增加文本字段的寬度？

Question

如果用戶在其中輸入一些文本，我想自動增加輸入文本字段的寬度。但如何去做。請幫助我。它可以使用jquery或javascript

謝謝。

Answer 1

嘗試這樣的：

<script> 
function adjustWidth(obj) { 

    obj.style.width = (obj.value.length) * 7.3 + "px"; 
} 
</script> 
<input type="text" onkeypress="adjustWidth(this)"> 

然而，這取決於文字大小，字體等

Answer 2

你的意思是這樣

DEMO

<input style="width:100px" onkeyup="var len = this.value.length; 
if (len>10) { 
    this.style.width=(parseInt(this.style.width)+10)+'px'; 
}" /> 

Answer 3

寬度不能作爲準確隨着字符的寬度彼此不同。

但儘管如此，你可以做這樣的事情

$("input:text").keyup(function() { 
    $(this).css('width', $(this).val().length*10); 
}); 

Demo 正如你可以看到我假設每個字符字段大小必須增加10px的。這很難分配適合所有角色的正確配給。

Answer 4

其實，你可以精確地做到這一點。您可以通過在屏幕外打開絕對位置的div，並使用與您的文本框相同的字體並在文本框中填充文本框中的文本來完成此操作。然後，將該div的寬度（將符合文本）並將文本框設置爲該寬度。

請注意，div需要離屏（左：-9999px），而不是隱藏（display：none），否則它將不起作用，因爲瀏覽器需要渲染文本以​​計算寬度。另外，將div的文本設置爲文本內容以及尾部空格將有助於確保文本框總是比所需的字符大一個字符，從而解決了顯示的鍵和正在更新的寬度之間的任何延遲。

休息過後，我會發佈一個修改後的James Padolsey的JQuery Autoresize腳本文件，它可以與textareas一起使用，首先將寬度調整爲某個最大大小，然後將文本的高度調整爲文本換行。這不完全是你想要的，但它可能會有所幫助。