Question

我有一个number类型的输入字段，范围从1到4096，如下所示：

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

Input field of type number

Iam目前使用step = 2，结果为2, 4, 6, 8, 10, ...

如何修改步骤以使值`1 , 2, 4, 8, 16,...`加倍？

注意：

该字段只能包含这些值（用户无法插入3 , 5 , 6, 7, ...）。它应该适用于增量和减量。

Answer 1

原生步进器不能满足您的要求。您最好的选择是实施自定义解决方案。

我把一个例子放在一起。看看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);
});

Answer 2

我会使用javascript在更改时动态更改您的步骤

<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

Answer 3

这很有效。

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

或者这个

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

Answer 4

该线程很旧，但如今，只需将步骤放在html标签中即可：

<!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>

来源：W3CSchool

如何自定义数字输入字段的步骤？

如何修改步骤以使值`1 , 2, 4, 8, 16,...`加倍？

4 个答案:

如何自定义数字输入字段的步骤？

如何修改步骤以使值1 , 2, 4, 8, 16,...加倍？

4 个答案:

如何修改步骤以使值`1 , 2, 4, 8, 16,...`加倍？