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

我有

。我喜欢它有

type=“number”

，因为我需要用户输入数字。我宁愿不改变它的类型远离数字。但是，我想在数字后显示单位。因此，如果单位是像素，我希望输入读取“5px”。我希望用户能够编辑5部分，但不能编辑px部分。找到的解决方案将无法工作，除非我做更多的噱头，使其更黑客，因为“px”将在chrome中的向上/向下箭头之后出现。这些是我说的箭头！[箭头示例][1]

在我的chrome环境中，您可以在

中添加字母字符，但这是

---

我需要一个可以在firefox、chrome、safari和IE9上运行的解决方案。

我建议将其扩展一点，并在

上浮动一个
px
。有了一点CSS，它看起来就像是输入内容的一部分。
在提出这个问题之前，我将如何处理这个问题。我打算做一个额外的、相同的
，除了不做
type=“number”
，而是做
position:absolute
。这样，它将直接堆叠在实际的
下。然后，我将其值设置为“px”，为其他输入中的每个数字留出一个空格。只要使用单间距字体，“px”就应该正确放置。但谁知道，浏览器最终可能会用箭头或其他东西将其重叠

编辑：我最后只是做了一个绝对定位，
，如果您将
for
属性设置为输入的id，那么当您单击
时，它将聚焦输入并准备好按键。然后您只需将标签的css更改为
cursor:text
，这样当您将鼠标悬停在标签上时，它就有了正确的光标。我在IE9+、FF、Safari和Chrome上进行了测试。
那么这个通用解决方案怎么样

创建一个额外的输入

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

请尝试以下代码

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


二甲苯

我们已经考虑了固定的（px）值的标签。
如果对您有帮助，请将答案标记为正确。
您可以使用以下代码实现此目的：
HTML:


或者，您可以使用引导来更容易地实现。选中此项
您是否只想显示“px”单元，或者用户可以选择他/她想显示的单元？我将只使用“px”。不过，对于更通用的解决方案，您可以获得额外的积分；）如果使用引导，下面是
 <input type="number" />
<label id="label1">px</label>

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

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