Html 完形填空的正确文本输入宽度

我在空白文本中填充了一个JS生成的填充/完形填空，我无法将文本框调整到正确的大小

但与其他人不同的是，我确切地知道用户将/应该输入什么

所以，如果我有一个间隙，像这样，我希望输入正好是4个字符宽。然而，可能因为我使用的是比例字体（这不会改变），所以宽度总是太大（即使是对于一系列非常宽的大写字母Ds）

那么，你有什么建议？我试着用大小、em中的CSS宽度（太大）和ex（即使对于xxes也太窄）来设置宽度

我可以通过一个隐藏的跨度元素来计算实际单词（需要填充的单词）的宽度，但这似乎不雅观

当我使用比例字体时，有没有办法让浏览器更准确地猜测输入的宽度？

单间距字体 我看到的最佳效果是使用单空格字体：

<input type="text" size="4" style="font-family:monospace" />

--

String.prototype.repeat=函数（num）{
返回新数组（num+1）。加入（this）；
}
$（函数（）{
$（“：输入[class^='sizeMe']”。每个（函数（）{
var size=Number（$（this.attr（“class”）.split（“-”）.pop（））；
var newW=$（“”）。text（“X”。repeat（size））。appendTo（“body”）；
$（this.width（$（newW.width（））；
$（newW）.remove（）；
});
});​

Mootools 如果有人偶然发现了这一点，在Mootools中，我刚刚创建了一个包含待填充空白文本的跨距，并使用了MootoolsMore中的这些方法（它们保证了不可见性，这对于完形填空非常重要）

$('gapsize').measure(function(){return this.getComputedSize()});

---

谢谢Jonathan。我可能不得不选择不雅观的方式，但我可能最好用另一种方式计算跨浏览器计算的宽度，对吗？我主要看到类似应用程序中使用clientX的东西来完成。或者Jquery是自动完成的吗？我使用Mootools，也许它也可以。您只是添加了跨度到主体，然后丢弃它，所以我接受了它，我不必担心因为速度而将它从视口中隐藏？我刚才还注意到，我的问题实际上可能在其他地方，因为你的示例中的宽度与我的示例中的宽度不太远（尽管如此，现在我正在使用它，我将继续使用它）@Ruben:jQuery将使用

$.width（）

计算元素的正确宽度。请记住，我的宽度计算是基于这样一个假设，即您使用的是几乎相同宽度的大写字符。

String.prototype.repeat = function(num) {
    return new Array( num + 1 ).join( this );
}

$(function(){
  $(":input[class^='sizeMe']").each(function(){
    var size = Number($(this).attr("class").split("-").pop());
    var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
    $(this).width( $(newW).width() );
    $(newW).remove();
  });
});​

$('gapsize').measure(function(){return this.getComputedSize()});