How to customize the step of a number input field?

Question

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.

Answer 1

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