HTML 数字输入中的多个步骤值

Question

我正在尝试自定义 HTML 数字输入，以便 step 值在某个数字之后增加，然后在另一个数字之后增加更多。例如，这是我想要实现的增量模式：

1、2、4、8、12、16、20、24、32、48、64、96、128

1 是第一个增量，2 是下一个增量，然后是 4、8、12，依此类推。我一直在做这方面的研究，但我找不到任何已经做过的例子。甚至在这个网站上也没有。我尝试使用 1,2,4,8,12,16,20,24,32,48,64,96,128 作为 step 值，但它恢复为 1。

<input type="number" name="number1" min="1" max="128" step="1" value="1">

我如何编写step 值以使这种情况发生，或者我必须使用 JavaScript 来代替吗？

Answer 1

这里有几个解决方案。请注意，这些是前沿，不太可能在许多浏览器中工作。哦，不言而喻，这仅在 HTML 中是不可能的。以下是基于 javascript 的答案。

您可以使用<dataset> 获取一系列可接受的值，然后使用 javascript 确保结果与这些值对齐。

var el = document.querySelector('[name=number1]');
var valueSet = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];

// event listener and initial trigger
el.addEventListener('change', function(e){
  // snippet to snap to a set value.
  // stolen from http://stackoverflow.com/a/19277804/854246
  el.value = valueSet.reduce(function (prev, curr) {
    return (Math.abs(curr - el.value) < Math.abs(prev - el.value) ? curr : prev);
  });
});

<input type="range" name="number1" value="1" list="sizes" min="1" max="128" />
<datalist id="sizes">
  <option>1</option>
  <option>2</option>
  <option>4</option>
  <option>8</option>
  <option>12</option>
  <option>16</option>
  <option>20</option>
  <option>24</option>
  <option>32</option>
  <option>48</option>
  <option>64</option>
  <option>96</option>
  <option>128</option>
</datalist>

或者您可以使用您的数字元素来确定将用作您的值的显示的数组的索引。

// elements and set of values
var el = document.querySelector('[name=number1]');
var label = document.querySelector('#display');
var valueSet = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];

// default values
el.setAttribute('min', 1);
el.setAttribute('max', valueSet.length);
el.setAttribute('step', 1);
el.value = 1;

// event listener and initial trigger
el.addEventListener('input', function(e){
  label.textContent = valueSet[this.value - 1];
});
el.dispatchEvent(new Event('input'));

<input type="number" id="number1" name="number1">
<label id="display"></label>

除了我的 mac 上的最新 chrome 之外，我没有在任何其他东西上测试过这些。

Answer 2

在输入更改，事件上，您可以将值更改为您的步骤。

var steps = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];
var input = document.getElementById("inputSteps");
var inputVal = 1;
input.addEventListener("change", changeInputStep);

function changeInputStep() {
  var dir = 0;
  if (this.value > inputVal) {
    dir = 1;
  } else if (inputVal > 1) {
    dir = -1;
  }
  this.value = steps[steps.indexOf(inputVal) + dir];
  inputVal = parseInt(this.value);
}

<input type="number" name="number1" min="1" max="128" value="1" id="inputSteps">

Answer 3

试试这个

这可能不是最好的，但它会帮助你找出你的问题。

     $( document ).ready(function() {
    
    $('.incBy2').val($( ".incBy2" ).attr( "min" ));
    var step_array = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];
   $(document).on("click keyup", ".incBy2", function () {
        var prev_val= parseInt($(this).attr( "prev_val" ));
        var current_val = parseInt($(this).val());
        var new_val = 0;

        if ( ( step_array[prev_val-1] ==128 || step_array[prev_val-1] >=128 ) && current_val >=128 ){
            return;  
        }
               
        if ( current_val >= step_array[prev_val-1] && current_val >1 )
        {
            new_val = prev_val+1;
        } else {
            new_val = prev_val-1
        }

        if ( new_val < 1 ){
            $(this).attr("prev_val", "1");
            $(this).val(1);
        } else{
           $(this).attr("prev_val", new_val);
           $(this).val(step_array[new_val-1]); 
        }              
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="incBy2" type="number" name="number1" min="1" max="128" prev_val="1"  value="1">