Question

我有一个JS生成的填空文本/ 完形填空，我无法将文本框调整到合适的大小。

但与其他人不同，我能够准确了解用户将要/应该进入的内容。

所以，如果我有这样的差距_______________，我希望输入正好是4个字符宽。但是，也许因为我使用的是比例字体（并且不会改变），所以宽度总是太大（即使是相当宽的资本Ds连续）。

那么，你有什么建议？我尝试设置宽度与大小，CSS宽度在em（太大）和ex（甚至对于xxes来说太窄）。

我可以计算实际单词的宽度（需要填写的单词）隐藏的span元素，但这看起来不够优雅。

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

Answer 1

Monospaced Font

我见过的最好的结果是使用等宽字体：

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

在线示例：http://jsbin.com/epagi/edit在Firefox，Chrome，Safari和IE中整齐呈现。

如果您使用的是可变宽度字体，则必须使用脚本来更好地猜测预期宽度是多少，但正如您所说，这不是很优雅。

可变宽度字体

我尝试为可变宽度字体设计一个合理简单的解决方案，但最终你需要看看它是否适合你的项目。

基本上我所做的是将text-transform的特定输入设置为uppercase，以便在填写文本时对的范围有一个半连续的期望。然后我应用了一个类名，表明该字段应该是自动调整大小的，以及我们期望的字符数：sizeMe-4。使用jQuery，我收集了所有这些输入，并拆分此类名以获得预期的字符数。

我扩展了String对象以包含一个repeat方法，该方法允许我轻松创建预期大小的字符串，并将其添加到ad-hoc span元素以获取宽度。然后将该宽度追溯应用于初始输入元素。然后丢弃跨度。

在线演示：http://jsbin.com/epagi/2/edit

为方便起见，这是代码：

<input type="text" name="pin" maxlength="4" class="sizeMe-4" 
       style="text-transform:uppercase" />

-

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();
  });
});

Answer 2

Mootools的

如果有人偶然发现这个问题，我在Mootools中创建了一个包含待填充空白文本的范围，并使用了Mootools中的这些方法更多（它们保证隐身性非常重要为完形填空。

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

修正完整字符串的文本输入宽度

2 个答案:

Monospaced Font

可变宽度字体

Mootools的