javascript - How to customize the step of a number input field? - Stack Overflow

admin管理员组

文章数量:1321043

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.

• javascript
• jquery
• html
• css
• input-field

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 10, 2014 at 20:54 mohameddiaa27mohameddiaa27 3,59711 gold badge1717 silver badges2323 bronze badges 5

• This would be confusing, since it differs from how number input widgets on web pages in general. Consider using a select element instead, with a suitable set of option values. – 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The 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">&#x25B2;</button>
  <button type="button" class="step down">&#x25BC;</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

本文标签： javascriptHow to customize the step of a number input fieldStack Overflow