Question

这对我来说似乎是一个非常奇怪的问题。我有一个没有应用大小CSS的文本输入。当我更改字体时，文本不再适合：

<input type="text" value="270.50" size="4" maxlength="128">

input {
    font-family: 'Lato',sans-serif;
}

http://jsfiddle.net/JZK4N/

enter image description here

我根本不能改变HTML。如何在不使用CSS为输入设置显式宽度的情况下解决此问题？

Answer 1

它需要大小吗？因为现在尺寸受到影响。

你可以尝试删除它，我试过，它会正常工作。

Answer 2

由于您的控件初始值有5个字符，而不是4个（句点计为字符），请使用size="5"代替size="4"。

一般不能保证这会导致足够的渲染，因为size属性的含义已经模糊定义（许多字符通常不确定特定宽度）并且不一致地实现。但对于Lato字体，主流浏览器合理地为270.50这样的数据实现size="5"（该字段有点过宽，但不多）。

控制文本输入框宽度以使其精确字符数的最佳方法是将size属性与等宽字体一起使用，即所有字符具有相同宽度的字体

Answer 3

这有点复杂。 AFAIK，如果没有明确定义宽度，则无法执行此操作。即便如此，宽度取决于您使用的字体。我想出的解决方案需要使用文本创建span元素，测量宽度，然后在input标记上使用该宽度。这需要使用 javascript/jquery ，如果您愿意使用它。

$(function(){
    $("input[type='text']").each(function(){                    
        var text = $(this).val();
        var fontF = $(this).css("font-family");
        $("body").append("<span id='temp'>" + text + "</span>");
        $("#temp").css("font-family", fontF);
        var mWidth = $("#temp").width();
        $(this).css("width", mWidth);
        $("#temp").remove();
    });
});

这是FIDDLE

更新：如果您担心Jukka提出的问题，请参阅这两个小提琴

FIDDLE 2

FIDDLE 3

根据值的字体调整输入标签的宽度

3 个答案: