使用type=number的输入框，但添加字母后缀

Question

我有一个 <input type="number"></input>。我很喜欢它的 type="number"，因为我需要用户输入数字。我不想改变其类型为其他类型。但是，我想在数字后面显示单位。所以如果单位是像素，我希望输入框中读取“5 px”。我想让用户能够编辑数字部分，但不能编辑单位部分。找到的解决方案（链接）在谷歌浏览器中无法正常工作，因为 "px" 会出现在上下箭头之后。这些就是我所说的箭头![示例图片][1]

在我的Chrome环境中，您可以在<input ...> 中放置字母字符，但是这在技术上是不合法的 我需要一个适用于火狐，谷歌，Safari和IE9的解决方案。

[1]: https://istack.dev59.com/yhDkR.webp

- Kevin Wheeler

---

用户只能选择显示“px”单位吗？还是可以让用户选择想要显示的单位？ - Saumil

我只会使用“px”。不过，如果有更通用的解决方案，那就更好了 ;) - Kevin Wheeler

如果使用Bootstrap，这里是解决方案：http://getbootstrap.com/components/#input-groups - Vibhor Dube

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

或者，您可以使用Bootstrap进行更容易的实现。请查看此FIDDLE

- Vibhor Dube

Answer 2

所以这个通用解决方案怎么样呢？

创建一个额外的输入。

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

现在让第二个输入框无边框，代码如下：

Now make the second input borderless as,

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

- Saumil

Answer 3

我建议将其稍微加宽，并在<input>上方浮动一个<span>px</span>。通过一些CSS，它看起来就像是输入内容的一部分。

- mike.k

Answer 4

我想在提出这个问题之前说明一下我的做法。我会创建一个额外的、完全相同的<input>，但不将它设置为type="number"，而是将其设置为position: absolute。这样它就会直接堆叠在实际的<input ...>下面。然后，我会将它的值设置为" px"，在其他输入框中的每个数字之间放置一个空格。只要使用等宽字体，'px'就应该被正确地放置。浏览器可能会用箭头或其他东西覆盖它，谁知道呢。

编辑：最终我创建了一个绝对定位的<label>，如果将for属性设置为您的输入框的ID，则单击<label>时，它将聚焦于输入框并准备好接收按键输入。然后，您只需更改标签的CSS，使其成为cursor: text，这样当您将鼠标悬停在标签上时，它就会显示正确的光标。我在IE9+、FF、Safari和Chrome上测试过这个方法。

- Kevin Wheeler

Answer 5

请尝试以下代码。

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

我们考虑在这里为FIX（px）值添加标签。

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

- user3497034