javascript - 输入 type=number 但添加字母后缀

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

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