Множественные значения шагов в вводе номера 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

Об изменении входного сигнала, событие, вы можете изменить значение на ваш шаг.

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 2

Вот несколько решений. Обратите внимание, что это кровоточащий край и вряд ли будет работать во многих браузерах. О, и само собой разумеется, что это невозможно в 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>

Я не проверял это в чем-либо, кроме последней хром на моем макинтоше.

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