Tab 단추를 누르면 다음 입력 필드로 이동하는 것을 지연시킬 수 있습니까?

Question

나는 내가 가지고있는 문제에 대한 도움을 얻을 수 있기를 바랬다. 웹 페이지에서 다음 입력 필드를 선택하기 전에 사용자가 Tab 단추를 누르면 약간의 지연을 설정하려고합니다. 그 이유는 AJAX를 사용하여 사용자로부터 입력을받는 확장 가능 및 접을 수있는 테이블을 사용하여 주문 양식 필드를 작성하기 때문입니다.

onfocusout을 사용하여 마지막 필드를 떠난 후 사용자가있는 현재 테이블 아래의 테이블을 확장하는 함수를 호출하고 첫 번째 입력 필드를 자동으로 바로 선택하도록 설정했습니다. 모든 것이 사용자가 테이블의 마지막 필드를 빠져 나올 때 끝내야 할 때와 같이 작동하지만, 다음 테이블을 검색 할 때까지 탭으로 표시 할 필드가 없기 때문에 문제가 있다고 생각되면 탭에서 빠져 나와야합니다. AJAX를 사용하여 표시합니다.

필요한 경우 코드를 제공 할 수 있지만 어딘가에서 실수하는 대신 뭔가를 놓치고 있다고 생각합니다. 도와 주시면 감사하겠습니다. 명확하지 않은 점을 분명히 밝혀 드리겠습니다. 고맙습니다!

Answer 1

그래서 어떻게 작동하는지에 대한 아주 기본적인 예를 만들었습니다. 필자의 예제는 입력에 대해서만 설명하지만 코드로 원하는 것을 수행 할 수 있습니다.

경고 : 자연스러운 브라우저 동작을 방지하는 것은 까다로울 수 있으므로 이러한 문제가 발생할 수있는 다른 문제에주의하십시오. 여기

은 바이올린은 당신이 할 수있는 방법을 보여주고있다 : https://jsfiddle.net/iamjpg/wme339h9/

document.onkeydown = TabExample; 

// Basic function 
function TabExample(evt) { 
    // Capture event 
    var evt = (evt) ? evt : ((event) ? event : null); 
    // Tab keycode constant 
    var tabKey = 9; 
    // If key is tab... 
    if (evt.keyCode == tabKey) { 
    // Prevent the next focus. 
    evt.preventDefault() 
    // Grab current focused element 
    var focusedElement = document.activeElement; 
    // Get array of inputs 
    var inputs = document.getElementsByTagName('input'); 
    // Set delay of 2 seconds. 
    setTimeout(function() { 
     // Loop through inputs 
     for (i = 0; i < inputs.length; i++) { 
     // If current evaluated input is one with focus... 
     if (inputs[i] === document.activeElement) { 
      // Grab the next index... 
      var focus_input = i + 1; 
      // Assure it isn't undefined. 
      if (inputs[focus_input]) { 
      // Give new input focus. 
      inputs[focus_input].focus(); 
      } 
     } 
     } 
    }, 2000) 
    } 
} 

행운을 빕니다!