输入大小与字母间距

Question

一个输入元素可以有一个 size 属性用来确定它的宽度可以容纳多少字符，在某些类型的输入中，字符数是固定的，这是一个很好的特性。例如电话号码、信用卡号码、客户ID号码等。在这种情况下，仅在输入字段上放置 size 属性比深入样式表并为每个输入字段定义宽度更方便。

然而，当添加 size 属性时，它不考虑 letter-spacing。如果我想要让我的数字之间更加分散，它们就会溢出输入宽度。有没有办法可以指定输入字段的大小并考虑 letter spacing 和其他可能影响文本大小的因素？

HTML：
<input size="5" placeholder="#####"/> CSS：
input { letter-spacing: 1em } 请查看此JSFiddle以获取输出。请注意，占位符文本溢出了输入字段。

请注意，当确定 size 时不考虑 letter-spacing 的问题发生在 Chrome 中，但在 Firefox 中没有发生。

- Xavier_Ex

---

我认为在input中使用letter-spacing没有问题。虽然没有明确的规范说明应该发生什么，但现代浏览器似乎在这方面相当一致。（它们在解释size属性时有所不同，但那是另一回事。）请展示一些你使用过的代码，并解释结果有何问题，以及在哪些浏览器上出现了问题。你是指你还设置了width属性吗？那么这就是罪魁祸首。 - Jukka K. Korpela

@JukkaK.Korpela，beautifulcoder发布的jsfiddle精确地展示了问题代码。在输入中使用letter-spacing没有问题，问题是它的“size”属性不考虑letter-spacing。因此，如果您有一个<input size="3">，则其长度将保持3个字符且无字母间距。至少在Chrome中没有这种情况。 - Xavier_Ex

Answer 1

尝试设置letter-spacing以设置字符间的字距。当您改变size属性时，此设置将得到尊重。

input {
    letter-spacing: 0.25em;
}

http://jsfiddle.net/RhwBG/

- beautifulcoder

---

问题说“它不考虑字母间距”。很难说这是什么意思，但这个答案似乎暗示在问题中。而且letter-spacing增加了字符之间的间距，而不是字距（这是一个完全不同的概念）。 - Jukka K. Korpela

不幸的是，这在我的Chrome浏览器中无法工作。我意识到FF在呈现带有大小的输入字段时会考虑字母间距，所以我想这只是浏览器不一致的问题。 - Xavier_Ex

Answer 2

您可以使用onkeypress动态地扩展它。这可能会有所帮助 调整输入字段的宽度以适应其输入

- amudhan3093

---

那是一件事，但在我的情况下，宽度不是动态的。我只想设置一个静态宽度，提前知道它将容纳多少个字符以及每个字符之间的空格（字母间距）。 - Xavier_Ex