How to customize the step of a number input field?

问题

I have an input field of type number which ranges from 1 to 4096 as follows:

---

<input max="4096" min="1" name="size" step="2" type="number" value="4096">

---

Iam currently using a step = 2, that result in numbers 2, 4, 6, 8, 10, ...

How can I modify the step to double the value 1 , 2, 4, 8, 16,...?

---

Note:

The field can contain only these values (The user shoudn't be able to insert 3 , 5 , 6, 7, ...). And it should work on both increment and decrement.

回答1:

The native stepper doesn't suite your requirements. Your best bet would be to implement a custom solution.

I put together a example. Have a look at this fiddle.

<div class="stepper">
    <span class="steps" data-min="1" data-max="4096"></span>
    <button type="button" class="step up">&#x25B2;</button>
    <button type="button" class="step down">&#x25BC;</button>
</div>

$('.steps').text($('.steps').data('min'));

$('.step').click(function() {
    if($('.steps').text() == 1 && $(this).hasClass('down') ||
      +$('.steps').data("max") == +$('.steps').text()
      && $(this).hasClass('up'))
        return;

    if($(this).hasClass('up'))
       $('.steps').text($('.steps').text() * 2);
    else
       $('.steps').text($('.steps').text() / 2);
});

回答2:

I would use javascript to change your step dynamically on change

<input max="4096" min="1" name="size" step="2" type="number" value="4096" id="foo">

<script type="text/javascript">
    $('#foo').change(function(){
        this.step=this.value;
    });
</script>

JSFiddle

回答3:

This works.

$("#numbercruncher").change(function(){
  
  var a=parseInt($("#numbercruncher").val());
  var b =a*2-1;
  $("#numbercruncher").attr("step",b);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="1000" id="numbercruncher"step="2">

Or this

 <input type="number" min="1" max="2000" onchange="this.step=this.value*2-1">

来源：https://stackoverflow.com/questions/26852827/how-to-customize-the-step-of-a-number-input-field