Question

所以我的问题是，如果您有一个带有max={100}和min={50}的HTML数字输入，如何设置它，以便在将其设置为50时按下向下箭头，然后回绕到100。我尝试通过操作onChange处理程序方法手动执行此操作，但这与在输入框中键入内容的能力搞混了，因此，如果我开始键入100，则按下的第一个键（1 ）低于50，并将其设置为50。

Answer 1

类似的事情：

const input = document.querySelector('input');
input.addEventListener('keydown', e => {
    const min = parseInt(input.min);
    const max = parseInt(input.max);    
    if(e.keyCode === 38 || e.code === 'ArrowUp') {
        e.preventDefault();
        input.value++; 
        if(input.value > max) input.value = min;
    }
    if(e.keyCode === 40 || e.code === 'ArrowDown') {
        e.preventDefault();
        input.value--;        
        if(input.value < min) input.value = max;        
    }    
})

/* hide spin button */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    display: none;
}
input[type=number] {
   font-size: 3em;
}

<input type="number" min="50" max="100" value="50" autofocus/>

Answer 2

change处理程序在每次输入值更改时触发。您需要使用约翰在评论中提到的keyup处理程序。

$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
  if (e.which === 38) { // Check if the pressed key is Up Arrow
    var val = $('#input').val();
    if (!isNaN(val)) { // Check if the value is a valid number
      val++;
      if (val > 100) val = 50; // If it exceeds 100, go back to 50
      if (val < 50) val = 100; // Vice versa
      $('#input').val(val);
    }
    else $('#input').val(50); // If the value is not a number, set it to 50
  }
  if (e.which === 40) { // Check if the pressed key is Down Arrow
    var val = $('#input').val();
    if (!isNaN(val)) {
      val--;
      if (val > 100) val = 50;
      if (val < 50) val = 100;
      $('#input').val(val);
    }
    else $('#input').val(50);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">

Answer 3

您可以使用闭包来跟踪输入中的值，然后对照元素自己的min和max属性来检查更新后的值。如下所示：

function ticker(initVal, el, max, min) {
  var currentValue = initVal;
  return function(n) {
    if (currentValue == n) {
      if (n == max) {
        el.value = min;
      } else if (n == min) {
        el.value = max;
      }
    }
    currentValue = n;
  }
}

var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));

<input type="number" id="myNumber" value="1" max="5" min="1">

如何使html数字输入回绕

3 个答案: