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>

我想，這可能會解決你的問題。