Отображение единиц в HTML stepper <input type = "number">

Question

Я хочу, чтобы пользователь вводил числа с единицей, такой как «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)?

Answer 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>

Answer 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">