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确保结果与这些值对齐。

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

// 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'));

＆＃13;

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

＆＃13;

我还没有在Mac上使用最新的Chrome测试这些内容。

Answer 2

试试这个

这可能不是最好的，但它可以帮助你弄清楚你的问题。

＆＃13;

     $( 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]); 
        }              
   });
});

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

HTML编号输入中的多个步骤值

3 个答案: