HTML <input type=“number”> 中的可编辑单位

Question

我希望用户使用 "px"、"em" 或“%”等单位输入数字，然后使用箭头输入 increase/decrease 值。

与此类似 jQuery UI Spinner demo，但可以选择在输入字段中直接输入任何单位。

更新： 我想到了这个对我有用。

Answer 1

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

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

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

});

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>

我认为这可能会解决您的问题。

Answer 2

感谢N K for his answer 。这是支持单元编辑的修改代码段。

$("#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>

HTML <input type=“number”> 中的可编辑单位

Editable units in HTML <input type=“number”>

jquery

html

forms

html-input