I want the user to enter numbers with a unit such as "cm", "kg" or "$". This can be done in jQuery UI: Example
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 -->
Is there a more native way for doing it (like example 2) or do I have to implement the workaround (example 3)?
The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed.
The Input Number object represents an HTML <input> element with type="number".
An input number allows the user to enter a number value. The step attribute can be used together with the min and max attributes to create a range of values the up/down arrows will step through. For example, if min is 0 and step is 3, the range of values is 0, 3, 6, etc.
$(".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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With