基於字符輸入寬度的增長文本框

我試圖創建一個文本框，每次將字母添加到其中時，都會通過字符的寬度增加一個文本框。這是我正在嘗試的。它不起作用。如果您有提示，請分享！基於字符輸入寬度的增長文本框

的JavaScript：

function MakeWidth(el) { 
     el.style.width = parseFloat(el.value.clientWidth) }

HTML：

<input id="Test" type="text" style="width: 10px;" onkeyup="MakeWidth(this)"/>

2011-11-13 Mike

嘗試size & length而不是clientWidth & width

function MakeWidth(el) { 
    el.size = parseInt(el.value.length); 
}

這應該是適合你的需求。

2011-11-13 20:01:33

爲什麼前幾個字符被切掉？嘗試在Firefox中。 – Matthew

我不確定，在Chrome 15和Opera中它工作得很好。嘗試[monospace]（http://jsfiddle.net/eVd9b/6/）字體 –

經過一段時間的測試後，此方法沒有發現'W'和'i'在非等寬字體中的寬度不同。我正在尋找一個解決方案。 – Mike

這是一個有點棘手，因爲你不必知道每個字符的寬度。想到的一個小訣竅是，你可以嘗試用鍵入的字符創建一個隱藏的div，獲取寬度，將其添加到文本框寬度並銷燬隱藏的div。

2011-11-13 19:56:09 psalvaggio

..或使用等寬字體。 –

使用size屬性可能更有用。

<input id="Test" type="text" size="1" onkeyup="MakeWidth(this)"/> 
<script> 
function MakeWidth(el) { 
     el.size = el.value.length 

} 
</script>

2011-11-13 20:02:18 kennebec

回答