在HTML步进器中显示单位< input type =" number"> [英] Display of units in HTML stepper <input type="number">
本文介绍了在HTML步进器中显示单位< input type =" number">的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望用户输入带有cm,kg或$等单位的数字。这可以在jQuery UI中完成:示例
I want the user to enter numbers with a unit such as "cm", "kg" or "$". This can be done in jQuery UI: Example
然而,我想在纯HTML中实现它,例如:
However, I would like to implement it in pure html, such as:
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)?
Is there a more native way for doing it (like example 2) or do I have to implement the workaround (example 3)?
推荐答案
$(".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>
这篇关于在HTML步进器中显示单位< input type =" number">的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文