Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display of units in HTML stepper <input type="number">

I want the user to enter numbers with a unit such as "cm", "kg" or "$". This can be done in jQuery UI: Example

enter image description here

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)?

like image 543
Simon Avatar asked Feb 19 '15 11:02

Simon


People also ask

What is the input type for numbers in HTML?

The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed.

How do I show numbers in HTML?

The Input Number object represents an HTML <input> element with type="number".

What is step in input 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.


1 Answers

$(".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>
like image 88
N K Avatar answered Oct 16 '22 16:10

N K