輸入類型=數字，但添加字母后綴

我有<input type="number"></input>。我喜歡它有type="number"這一事實，因爲我需要用戶的數字輸入。我寧願不從數字改變它的類型。不過，我想在號碼後面顯示單位。所以我希望輸入讀取「5 px」，如果單位是像素。我希望用戶能夠編輯5部分，但不能編輯px部分。找到here的解決方案將無法工作，除非我做更多的噱頭，並使其更庸俗，因爲「px」會出現在鍍鉻的向上/向下箭頭之後。這是我說的！[箭頭的範例] [1]輸入類型=數字，但添加字母后綴

在我鍍鉻的環境中，你可以把字母字符在<input ...>的箭頭，但是這是technically not legal

我需要一個解決方案可以在Firefox，Chrome，Safari和IE9上運行。

來源

2015-06-12 Kevin Wheeler

將「px」作爲您想要顯示的唯一單位還是用戶可以選擇他/她想要顯示的單位？ –

我只會使用「px」。儘管如此，獎勵積分爲更一般的解決方案;） –

如果使用引導，這裏是[解決方案]（http://getbootstrap.com/components/#input-groups） –

我建議使它更寬一些，並在<input>之上浮動<span>px</span>。有了一點CSS，它看起來就像是輸入內容的一部分。

來源

2015-06-12 00:38:14

只是爲了拋出它在我提出這個問題之前如何處理這個問題。我打算做一個額外的，相同的<input>除了不使它type="number"並使其position: absolute。這樣它將直接堆疊在實際的<input ...>之下。然後我將它的值設置爲「px」，爲其他輸入中的每個數字放置一個空格。只要你使用等寬字體，'px'應該被正確放置。誰知道，瀏覽器可能會用箭頭或其他東西重疊。

編輯：最後我只是讓一個絕對定位，<label>，如果你設置了for屬性爲你輸入的ID，那麼當你點擊<label>將重點投入，並且是準備按鍵。然後，您只需將標籤的css更改爲cursor: text，以便將鼠標懸停在標籤上時，它具有正確的光標。我在IE9 +，FF，Safari和Chrome上測試了這一點。

來源

2015-06-12 00:51:46

那麼這個通用解決方案如何。

創建一個額外的輸入，

<input type="number" /> 
<input type="text" readonly value="px" class="unit"/>

現在使第二個輸入無國界的，

.unit{ 
border: none; 
border-color: transparent; 
width: 15px; 
}

來源

2015-06-12 00:54:55

請嘗試以下代碼

<input type="number" /> 
<label id="label1">px</label>

我們必須考慮警示標籤FIX（PX ）價值在這裏。

如果對您有幫助，請將答案標爲正確。

來源

2015-06-12 06:55:34

你可以做到這一點使用下面的代碼： HTML：

<div class="size-input-wrapper"> 
    <label for="inputValidation">Enter size:</label> 
    <input type="number" id="inputValidation" placeholder="size"/> 
    <span class="pxSpan">px</span> 
</div>

CSS：

.size-input-wrapper { 
    max-width: 208px; 
    margin: auto; 
    position: relative; 
    display: inline-block; 
} 
#inputValidation { 
    padding-right: 35px; 
} 
.pxSpan { 
    position: absolute; 
    top: 19px; 
    right: 10px; 
}

FIDDLE HERE

或者，您可以使用引導更容易實現。請檢查此FIDDLE

來源

2015-06-12 10:02:31

輸入類型=數字，但添加字母后綴

回答

相關問題