如何在 HTML(5) 中正确地在 <input type="number"> 的末尾添加一个单位？答案

【问题标题】：How to add a unit to the end of <input type="number"> properly in HTML(5)?如何在 HTML(5) 中正确地在 <input type="number"> 的末尾添加一个单位？
【发布时间】：2019-12-17 19:30:55
【问题描述】：

我想要一个<input type="number">，它的末尾有一个单位 (m²)，但用户无法更改它。我现在有这个：

<label>
  Area:
  <input type="number" name="area">
</label>

我想我不能直接在<input> 之后添加一个单位，因为这可能会弄乱<label>。那我该怎么办？最好使用for 属性分隔<label> 或使用CSS 或其他什么添加::after 伪元素？

【问题讨论】：

标签： html forms html-input

【解决方案1】：

虽然您可以使用 ::after 伪选择器，但最好的方法是使用标签中的 m2 为输入中预期的值提供更多上下文信息。换句话说 - 标签通知用户输入中的值意味着什么。

注意<sup> 元素，它允许对 2 进行上标渲染。

<label>
  Area (m<sup>2</sup>):
  <input type="number" name="area">
</label>

您还可以使用内容创建一个跨度并将其包含在标签中 - 在输入之后，它将显示在输入的末尾。

<label>
  Area:
  <input type="number" name="area">
  <span> m<sup>2</sup></span>
</label>

您甚至可以将其绝对定位，使其显示在输入字段本身 - 但鉴于这是一种数字类型的输入 - 浏览器将在字段的最右侧插入一个“步进器” - 所以你需要枯萎移动它向左以避免这种情况，或者使用 type="text" 输入并验证输入是否为数字。

label {
  position: relative;
}

label span {
  position: absolute;
  top: -1px;
  right: 24px;
}

<label>
      Area:
      <input type="number" name="area">
      <span> m<sup>2</sup></span>
    </label>

【讨论】：