Редактируемые единицы в HTML <input type = "number">

Question

Я хочу, чтобы пользователь вводил числа с единицами типа «px», «em» или «%», а затем увеличивал/уменьшал значение с помощью стрелок.

Аналогично этому jQuery UI Spinner demo, но с возможностью ввода любого элемента справа внутри поля ввода.

UPD: Я придумал этот solution, который работает для меня.

Answer 1

N K за его ответ here. Вот отредактированный фрагмент, который редактирует единицы поддержки.

$("#value").on("change", function(){ 
 
    var units = $("#units").val(); 
 
    console.log(units); 
 
    $(".fake input").val(this.value + units); 
 
}); 
 
$(".fake input").on("change", function(){ 
 
    var value = this.value.match(/(\d*\.?\d*)(.*)/); 
 
    $("#value").val(value[1]); 
 
    $("#units").val(value[2]); 
 
});

.fake { 
 
    position: relative; 
 
    top: -20px; 
 
    left: 2px; 
 
    float: left; 
 
} 
 
.fake input { 
 
    width: 145px; 
 
    border: none; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="original"> 
 
    <input id="value" type="number" step="1"/> 
 
    <input id="units" type="hidden" name="units" value="px"/> 
 
</div> 
 
<div class="fake"> 
 
    <input type="text" value="0px"/> 
 
</div>

Answer 2

[Fiddle][solution]  
[solution]: http://jsfiddle.net/apurvaojas/yvLj1400/1/ 

$("input[type='number']").change(function(){ 
 
    var ip = $(this); 
 
    switch($('select').val()) 
 
    { 
 
\t \t \t case 'per': $('div.block').width(ip.val()+"%"); 
 
\t \t \t break; 
 

 
\t \t \t case 'em': $('div.block').width(ip.val()+"em"); 
 
\t \t \t break; 
 
      
 
      case 'px': $('div.block').width(ip.val()+"px"); 
 
\t \t \t break; 
 
\t \t \t 
 
\t \t \t default: return; 
 
\t \t } 
 

 
});

div.block{ 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top:10px; 
 
} 
 
.container{ 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="number" name="val"> 
 
    <select> 
 
    <option value="per">%</option> 
 
    <option value="em">em</option> 
 
    <option value="px">px</option> 
 
    
 
</select> 
 
    <div class="container"> 
 
    <div class="block"></div>  
 
    </div>

Я думаю, что это может решить вашу проблему.