Question

我有<input type="number"></input>。我喜欢它有type="number"的事实，因为我想要用户输入数字。我宁愿不改变它的类型。但是，我想在数字后显示单位。所以如果单位是像素，我希望输入读取“5 px”。我希望用户能够编辑5部分，但不能编辑px部分。找到的解决方案here将不起作用，除非我做更多的噱头并使其变得更加粗俗，因为“px”将出现在chrome中的向上/向下箭头之后。这些是我正在谈论的箭头！[箭头的例子] [1]

在Chrome环境中，您可以在<input ...>中添加字母字符，但这是technically not legal

我需要一个适用于firefox，chrome，safari和IE9的解决方案。

Answer 1

我建议将其放宽一点<span>px</span>在<input>之上。有了一点CSS，它看起来就像是输入内容的一部分。

Answer 2

在提出这个问题之前，我想把它放在那里。我打算做一个额外的，相同的<input>，除非不要type="number"并将其设为position: absolute。这样它就会直接堆叠在实际的<input ...>之下。然后我将其值设置为“px”，为其他输入中的每个数字添加一个空格。只要您使用等宽字体，就应该正确放置'px'。浏览器最终可能会用箭头或其他东西重叠，但谁知道呢。

编辑：如果您将<label>属性设置为输入的ID，那么我最终只能做出绝对定位for，然后当您点击<label>时将重点关注输入并为按键做好准备。然后，您只需将标签的css更改为cursor: text，这样当您将鼠标悬停在标签上时，它就会有正确的光标。我在IE9 +，FF，Safari和Chrome上进行了测试。

Answer 3

那么这个通用解决方案怎么样。

创建额外的输入

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

现在将第二个输入设为无边框，

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

Answer 4

您可以使用以下代码实现此目的： 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

或者，您可以使用bootstrap更容易实现。请检查此FIDDLE

Answer 5

请尝试以下代码

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

我们已经考虑了Lable for FIX（px）值。

如果对您有帮助，请将答案标记为正确。

输入类型=数字但添加字母后缀

5 个答案: