帶字母間距的輸入大小

輸入元素可以具有「size」屬性，用於確定寬度可以容納多少個字符，這對於某些類型的輸入中字符數量固定的場景是一個很好的功能。例如，電話號碼，信用卡號碼，客戶ID號碼等。在這種情況下，將「大小」屬性放在輸入字段上比將樣式表深入併爲每個樣式表定義寬度更方便。帶字母間距的輸入大小

但是，在放置尺寸屬性時，不考慮字母間距。如果我想讓我的數字更加分散，它們會溢出輸入寬度。有什麼方法可以指定輸入字段的大小，同時考慮字母間距以及可能影響文本大小的其他因素？

HTML：
<input size="5" placeholder="#####"/>

CSS：
input { letter-spacing: 1em }

的輸出中看到這JSFiddle。請注意，佔位符文本會溢出輸入字段。

來源

2014-02-05 Xavier_Ex

我沒有看到一個問題，使用'信spacing'爲'input'。沒有關於應該發生什麼的規範，但現代瀏覽器在這裏似乎相當一致。（它們在'size'屬性的解釋方面有所不同，但這是一個不同的故事。）請顯示您使用的一些代碼，並解釋結果和哪個瀏覽器出了什麼問題。你的意思是說你*還有* width屬性集？那麼這將是罪魁禍首。 –

@ JukkaK.Korpela由beautifulcoder發佈的jsfiddle精確地顯示了有問題的代碼。在輸入中使用字母間距沒有問題，這是因爲它的「大小」屬性沒有考慮字母間距。所以如果你有一個''它的長度將會保持3個字母爲0的字母間距。至少在Chrome中這不是榮譽。 –

您應該在問題中包含*您的*代碼，而不是在問題中提及答案中提及的某個網址。一個問題應該可以單獨理解，不需要閱讀評論或答案。 –

可以使用onkeypress.This可能會有所幫助 Adjust width of input field to its input

來源

2014-02-05 18:36:08 amudhan3093

那麼這是一回事，但在我的情況下，寬度不是動態的。我只想設置一個靜態寬度，事先知道它將容納多少個字符，以及每個字符（字母間距）之間有多少空間。 –

嘗試設置letter-spacing設置字符之間字距動態拓寬它。當您更改size屬性時，這很榮幸。

input { 
    letter-spacing: 0.25em; 
}

http://jsfiddle.net/RhwBG/

來源

2014-02-05 18:48:22 beautifulcoder

這個問題說「它不考慮字母間距」。很難說這是什麼意思，但這個答案似乎暗含在這個問題中。 '字母間距'增加了字符之間的間距，而不是字距（這是一個完全不同的概念）。 –

不幸的是，這不適用於我的Chrome。我確實意識到FF在處理大小的輸入字段時需要考慮字母間距，所以我猜這只是瀏覽器的不一致性。 –

帶字母間距的輸入大小

回答

相關問題