如何自定义数字输入字段的步骤？ [英] How to customize the step of a number input field?

问题描述

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

---

 < input max = 4096min =1name =sizestep =2type =numbervalue =4096> 
  

---

Iam当前使用 step = 2 ，导致数字 2,4,6,8,10，...

h2>如何修改步骤以将值加倍 1，2，4，8，16，... ？

---

注意 ：

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

解决方案

原生步进器不符合您的要求。你最好的选择是实现一个定制的解决方案。

我举了一个例子。看看这个小提琴。

 < div class =stepper> 
< span class =stepsdata-min =1data-max =4096>< / span> 
< button type =buttonclass =step up>&＃x25B2;< / button> 
< button type =buttonclass =step down>&＃x25BC;< / button> 
< / div> 
 
 $（'。steps'）。text（$（'。steps'）。data（'min'））; $（$。'step'）。text（）== 1&& $（this）
 $ b $（'。step'）。 .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）; 
}）; 
  

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.

解决方案

The native stepper doesn't suite your requirements. Your best bet would be to implement a custom solution.

I put together a example. Have a look at 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);
});

这篇关于如何自定义数字输入字段的步骤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！