在 HTML 步进器中显示单位 <input type="number">答案

【问题标题】：Display of units in HTML stepper <input type="number">在 HTML 步进器中显示单位 <input type="number">
【发布时间】：2015-04-20 17:47:09
【问题描述】：

我希望用户输入单位为“cm”、“kg”或“$”的数字。这可以在 jQuery UI 中完成：Example

不过，我想用纯html实现，比如：

input{
  display: inline;
}

div.euro-sign::after{
  content: "€";
  margin-left: -40px;
}

<div><input placeholder="5 €" type="number" step="1"></div>

<div><input placeholder="5 €" type="number" step="1" unit="€"></div><!-- NOT working -->

<div class="euro-sign"><input placeholder="5" type="number" step="1"></div><!-- Workaround -->

是否有更本地化的方法（如示例 2）或者我必须实施解决方法（示例 3）？

【问题讨论】：

标签： html forms html-input

【解决方案1】：

$(".original input").on("change", function(){
    $(".duplicate input").val(this.value + '€');
});
$(".duplicate input").on("change", function(){
    $(".original input").val(this.value.substring(0, this.value.length - 1));
});

.duplicate {
    position: relative;
    top: -20px;
    left: 2px;
    float: left;
}
.duplicate input {
    width: 145px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="euro-sign">
    <div class="original">
        <input type="number" step="1"/>
    </div>
    <div class="duplicate">
        <input type="text" value="0€"/>
    </div>
</div>

【讨论】：

【解决方案2】：

提议使用单选按钮...

<div>
<input type="radio" name="Money " value="YEN">YEN ¥ <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0">
</div><br>

<div>
<input type="radio" name="Money " value="USD" checked>US $ <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0">
</div><br>

<div>
<input type="radio" name="Money " value="EURO">EUR € <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0">
</div><br>

<input type="submit">

【讨论】：