Hiển thị các đơn vị trong bước HTML <input type = "number">

Question

Tôi muốn người dùng nhập số bằng đơn vị như "cm", "kg" hoặc "$". Điều này có thể được thực hiện trong jQuery UI: Example

Tuy nhiên, tôi muốn thực hiện nó trong html tinh khiết, chẳng hạn như:

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

Có hơn cách riêng để thực hiện nó (như ví dụ 2) hoặc tôi có phải thực hiện giải pháp thay thế (ví dụ 3) không?

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

Kiến nghị để sử dụng các nút radio ...

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