如何自定义数字输入字段的步长？答案

【问题标题】：How to customize the step of a number input field?如何自定义数字输入字段的步长？
【发布时间】：2014-11-10 20:54:55
【问题描述】：

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

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

我目前正在使用step = 2，这导致数字2, 4, 6, 8, 10, ...

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

注意：

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

【问题讨论】：

这会令人困惑，因为它与一般网页上的数字输入小部件不同。考虑改用 select 元素，并使用一组合适的 option 值。
我还有其他范围更大的字段，我不希望用户从包含 2000 个项目的下拉列表中进行选择。我想知道是否有现成的解决方案。跨度>
我猜你需要 javascript。
如果您认为“加倍值”功能很有用，请考虑使用带有 JavaScript 驱动按钮的简单文本输入字段来加倍值，并且 JavaScript 检查值是否为可接受值之一（如果用户只是输入一些东西）。
我试图避免在一个简单的字段中添加过多的逻辑。但这似乎是我唯一的选择。

标签： javascript jquery html css input-field

【解决方案1】：

本机步进器不符合您的要求。您最好的选择是实施自定义解决方案。

我举了一个例子。看看吧：

$('.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.com/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>

【讨论】：

用带有“div”和 2 个按钮的自定义构建替换原生 html 元素可能会产生重大影响。其中之一是可访问性。其次，是语义。

【解决方案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

【讨论】：

"this.step=this.value" 比 "$('#foo').attr('step',$('#foo').val())" 更快/更简单
它和你的代码做同样的事情，只是没有不必要的开销。小提琴似乎在这两种口味中都不起作用，除了奇怪地下降......
onchange="this.step=this.value"
我正在寻找开箱即用的东西，您提出的解决方案无法减少数量。
@mohameddiaa27 你说的“开箱即用”是什么意思？ step 不是这样工作的，所以从这个意义上说，不会有开箱即用的解决方案。

【解决方案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">

或者这个

 &lt;input type="number" min="1" max="2000" onchange="this.step=this.value*2-1"&gt;

【讨论】：

使用 jQuery，但问题没有用“jquery”标记。并且不起作用：第二个增量使值 2 和字段在 HTML 和 CSS 术语中无效（因为您更改了 step 值）。
第二个代码 sn-p 不使用 jquery。他希望步进值每次翻倍，这正是它的作用。为什么 html 和 css 无效？
如您所见，field 无效，例如通过在 Firefox 上进行测试（显示红色轮廓，根据浏览器对无效值字段的默认设置）。如果你可以在 JavaScript 单行中做到这一点，为什么要先介绍一个 jQuery 替代方案？
承认我没有看到 jquery 没有被标记，扫描页面并在另一个答案中看到 jquery。我的坏..在我发布后，我意识到并研究了使用纯 js 的其他方式，因此是第二个答案。至于使html无效......嗯，也许没有添加值字段？？一会儿看看再回来
我的错，我可以使用 jQuery。问题是，此代码仅适用于增加数字。

【解决方案4】：

这个帖子很老了，但现在，只需将 step 放在 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,...的值加倍？

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