如何計算輸入HTML元素的寬度，使其與其內容的大小相匹配？

如何計算輸入HTML元素的寬度，使其與其內容的大小相匹配？我已經即時更新的輸入作爲用戶類型：如何計算輸入HTML元素的寬度，使其與其內容的大小相匹配？

<input type='text' onkeydown='this.size=this.value.length' />

然而，這似乎並不完全正確，因爲它沒有考慮到一個事實，即一些字符比一般人長：

我會得到越來越多的空白，如果我只需鍵入一些「L」字符
如果我只需鍵入一些「W」字符的大小將不足以

如何繼續？

PS：爲什麼我想這樣做（已經回答了這個問題，已刪除答案）？我有句子，我必須通過輸入替換括號內容（例如：[用戶]是[歲]）。我不知道句子可以是什麼，所以我不知道輸入的長度是否合適，並且我想在一行中保持可讀性（避免太多空白）。

來源

2012-05-31 JB Hurteaux

爲什麼你在第一時間想這個？也許有一個更簡單的解決方法 –

onkeydown不會通過鼠標點擊粘貼 –

@Pekka問題編輯。往上看。 –

您可以使用（隱藏）畫布和上下文的measureText()方法獲取字符串的寬度。

編輯：

看起來fast enough。

來源

2012-05-31 12:43:12 dda

畫布不支持IE8恐怕（請不要問我爲什麼要支持IE8）。但是，我很好奇這將是多麼有效率/快速。對於onkeyup它會執行得足夠快嗎？ –

好問題。我會試一試。 – dda

查看修改後的答案。 – dda

首先，定義一些CSS ...

input, 
#input-helper { 
    display: inline; 
    font-size: 14px; 
    font-family: serif; 
    line-height: 16px; 
} 

#input-helper { 
    position: absolute; 
    top: -10000px; 
}

...然後用一些JavaScript ...

var div = document.createElement("div"); 
div.id = "input-helper"; 
document.body.appendChild(div); 

var input = document.querySelector("input"); 

input.addEventListener("keyup", function() { 
    div.textContent = this.value; 
    input.style.width = div.offsetWidth + "px"; 
});

jsFiddle。

您也想爲input元素選擇合理的起始寬度。

來源

2012-05-31 12:44:46 alex

好的，聰明。但有些不確定這是否足夠快。 onkeyup可以在1秒內發射很多次。將測試。 –

+1用於創建出色的使用方法。按照我的口味，把''px''改成'+ 15 +'px''使得文字[減少跳躍]（http://jsfiddle.net/Y5vAe/1/）。我提供的答案可能是矯枉過正，但2kb源文件也基於'.offsetWidth'。乾杯! – arttronics

如果使用jQuery不是問題，這裏是一個演示我放在一起jsFiddle。它使用一個Autoexpand.js文件，可以做你想做的。看看小提琴中的最後一個例子。

一些細節：

它基於.keyup和.keypress最快響應可能的。
它考慮到粘貼到框中的HTML標記。諸如換行符之類的事情都會被處理。
源文件通過考慮字體的所有內容來顯示智能處理。

也包含在jsFiddle中的鏈接是從jsFiddle沙箱在IE8中斷以後下載pastebin版本的小提琴。這就是說，它也適用於IE7！

來源

2012-06-02 07:35:52 arttronics

在我的情況下我不能使用JQuery。非常感謝，可能對其他人有用。 –

第一：添加這個div要將

<div id="calcsize" style="display:none;"></div>

二：使用此功能

function getWidthof(txt) 
{ 
    $('#calcsize').empty().append(txt); 
    return $('#calcsize').width(); 
}

來源

2016-07-30 07:04:34 aDDin

如何計算輸入HTML元素的寬度，使其與其內容的大小相匹配？

回答

相關問題