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

Question

我希望用户输入一个单位,例如"cm","kg"或"$".这可以在jQuery UI中完成:示例

但是,我想在纯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)？

Answer 1

\r\n

\r\n

$(".original input").on("change", function(){\r\n    $(".duplicate input").val(this.value + \'\xe2\x82\xac\');\r\n});\r\n$(".duplicate input").on("change", function(){\r\n    $(".original input").val(this.value.substring(0, this.value.length - 1));\r\n});

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n