Question

假设我有一个四位数的输入元素。我想确保输入元素在视觉上呈现这一事实而不含糊。但是我发现大多数浏览器似乎都将size = 4表示为size = 6。为什么？我如何实现我的目标？

＆＃13;

<input type=text value=123456 size=4>

＆＃13;

Answer 1

我不太清楚为什么<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> <div class="ui container"> <div class="ui equal width padded grid"> <div class="ui row"> <div class="ui black column"></div> <div class="ui red column"></div> </div> </div> <div class="ui padded grid"> <div class="ui blue row"> <div class="ui column">Single Row</div> </div> <div class="ui yellow equal width row"> <div class="ui green column">1</div> <div class="ui column">2</div> <div class="ui red column">3</div> </div> <div class="ui three column row"> <div class="ui pink left floated column">LEFT</div> <div class="ui pink right floated column">RIGHT</div> </div> </div> </div>属性如此不准确，但如果我需要一个合适的，我会使用每个字符1ch和1px的填充。 ch是一个大约零宽度的测量单位。它与所使用的字体有关，因此它会有所不同，但如果用于测量实际使用的字符数，它会非常准确。

如果您希望实际字符空间为6或更小，我只会发现它，您需要使用size。因此，6ch宽度和maxlength的组合是完美的。

刚刚找到这个article，这解释了为什么maxlength='6'就是这样。显然，size基于font-size，

font-size属性（12 pt vs. 14 pt）和所用字体的相对大小（例如Arial vs.Helvetica`）。

了解详情：http://html.com/attributes/input-size/#ixzz4VyvrKPLm

<强>段

＆＃13;

size

＆＃13;

input {
  width: 6ch;
  padding: 1px;
}

＆＃13;

Answer 2

input {
  box-sizing: content-box;
  width: 4ch;
}

Answer 3

您可以使用maxlength属性设置预定义的大小，以便为输入提供多个字符。

如果您希望它是交互式的，那么使用JS可能会有点过分，但以下内容会根据输入调整输入文本框的大小。

<body onload="len()">

<input id="input" type="text" value=123456 size=4 onblur="len()">

<script>
function len() {
    var n = document.getElementById("input").value.length;
    document.getElementById("input").size = n;
}
</script>

输入元素大小属性不会在视觉上匹配显示的数字

3 个答案: