как сделать навигацию стрелочками по полям ввода

Question

<head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
   <input class="hours Time" onkeyup="testJump(this);" tabindex = "0" maxlength="2"  min="00"  max="24"type="text"  size="1">:
   <input class="minutes Time" onkeyup="testJump(this);" tabindex = "-1" time-min="00" maxlength="2" time-max="60" type="text" size="1">:
   <input class="secs Time" onkeyup="testJump(this);" tabindex = "-1" time-min="00" time-max="60" maxlength="2" type="text" size="1">
  </p>
 </form>

 </body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(function() {
    $(document).on("change keyup input click", "input[type='text']", function() {
        if(this.value.match(/[^0-9]/g)){
            this.value = this.value.replace(/[^0-9]/g, "");
          };          
         var hours = $( '.hours' ).val();
         var minutes = $( '.minutes' ).val();
         var secs = $( '.secs' ).val();
         $('.hours').attr({
            "max" : 24,        // substitute your own
            "min" : 0          // values (or variables) here        
            });
           if(hours > 23)
              {
               this.value = this.value.replace(hours, '23');
              };
           if(minutes > 59)
              {
               this.value = this.value.replace(minutes, '59');
              };
           if(secs > 59)
              {
               this.value = this.value.replace(secs, '59');
              }; 
             
    });

  
});


</script>
<script>
function testJump(x){
    var ml = ~~x.getAttribute('maxlength');
    if(ml && x.value.length >= ml){
        do{
            x = x.nextSibling;
        }
        while(x && !(/text/.test(x.type)));
        if(x && /text/.test(x.type)){
            x.focus();
        }
    }
}
</script>
<script>

 function setFocus(e) {

        e = e || window.event;

        if(e.keyCode == 37 || e.keyCode == 39) {

            var cell = this.parentNode;

            var row = dom[e.keyCode == 37 ? "prev" : "next"](cell.parentNode);

            if(row) {

                row.getElementsByTagName("input")[cell.cellIndex].focus();

            }

        }

    }
</script>

</html>

Есть такой html+js как сделать навигацию стрелочками перехода по полям? Jquery

Answer 1

В простом виде можно так:

Заранее достать все элементы, по которым можно будет гулять
При клике обновлять текуший активный индекс
Зациклить фокусирование

const timeForm = document.querySelector('#timeForm');
const inputs = [...timeForm.querySelectorAll('input')];
let currentActiveIndex = 0;
inputs[currentActiveIndex].focus();

inputs.forEach((input, index) => input.addEventListener('click', () => currentActiveIndex = index))

timeForm.addEventListener('keydown', (e) => {
  let direction = 0;
  
  switch(e.code) {
    case 'ArrowRight':
      direction = 1;
      break;
    case 'ArrowLeft':
      direction = -1;
      break;
    default:
      return;
  }
  
  currentActiveIndex = (inputs.length + currentActiveIndex + direction) % inputs.length;
  
  inputs[currentActiveIndex].focus();
})

<form id="timeForm">
  <input>
  <input>
  <input>
</form>

БЛОГ НА HUSL

как сделать навигацию стрелочками по полям ввода

Ответы (1 шт):