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.
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.
-
This would be confusing, since it differs from how number input widgets on web pages in general. Consider using a
selectelement instead, with a suitable set ofoptionvalues. – Jukka K. Korpela Commented Nov 10, 2014 at 21:07 - I have other fields with even bigger range, I don't want the user to select from dropdown with 2000 items .I'm trying to know if there is a solution out of the box. – mohameddiaa27 Commented Nov 10, 2014 at 21:11
- I guess you'll need javascript for that. – Markus Kottländer Commented Nov 10, 2014 at 21:54
- If you think a “double the value” functionality is useful, consider using a simple text input field with JavaScript-driven buttons for doubling the value and JavaScript checks for the value being one of the accepted values (in case the user just types in something). – Jukka K. Korpela Commented Nov 10, 2014 at 22:26
- I was trying to avoid adding too much logic in a simple field. But this seems to be my only option. – mohameddiaa27 Commented Nov 10, 2014 at 22:30
4 Answers
Reset to default 2The native stepper doesn't suit your requirements. Your best bet would be to implement a custom solution.
I put together an example. Have a look at it:
$('.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);
});.stepper {
width: 75px;
height: 30px;
border: 1px solid #C0C0C0;
display: inline-block;
}
.steps {
width: 55px;
float: left;
display: inline-block;
text-align: center;
line-height: 30px;
}
.step {
font-size: 8px;
width: 20px;
padding: 0px;
float: right;
}
.step.up {
vertical-align: top;
}
.step.down {
vertical-align: bottom;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stepper">
<span class="steps" data-min="1" data-max="4096"></span>
<button type="button" class="step up">▲</button>
<button type="button" class="step down">▼</button>
</div>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
This works.
$("#numbercruncher").change(function(){
var a=parseInt($("#numbercruncher").val());
var b =a*2-1;
$("#numbercruncher").attr("step",b);
});<script src="https://ajax.googleapis./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">This thread is old, but nowadays, just put step in the html tag:
<!DOCTYPE html>
<html>
<body>
<h1>The input step attribute</h1>
<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="0.2">
<input type="submit">
</form>
</body>
</html>
Source: W3CSchool