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

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

在我的 chrome 环境中，您可以在 <input ...> 中放入字母字符，但这是 technically not legal

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

最佳答案

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

关于javascript - 输入 type=number 但添加字母后缀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30793482/