삽입 된 값에 초점 맞추기 변경

Question

내 문제 : 문자가 삽입 된 후 다음 텍스트 입력에 집중해야합니다. 이 입력은 하나의 문자, 특히 숫자 만 포함 할 수 있습니다.

내 솔루션 (의사 코드) :

onKeyUp="nextInput.focus()" 

은 ... 바탕 화면에 잘 작동하지만 모바일, 때로는 값은이 (잘못된 셀) 다음 필드를 이동 한 후 기록됩니다.

내 두 번째 해결 방법 : onchange를 이벤트가 HTML 요소가 자신의 포커스를 잃은 경우에만 호출되기 때문에

onChange="nextInput.focus()" 

이 작동하지 않습니다.

Answer 1

그것은 내 사파리에서 작업, 아이폰을 보인다 :

$("#first").on('keyup', function(e){ 
    if(isCharacterKeyPress(e)){ 
    $("#second").focus(); 
     console.log(e); 
    } 
}); 

function isCharacterKeyPress(evt) { 
    if (typeof evt.which == "undefined") { 
     // This is IE, which only fires keypress events for printable keys 
     return true; 
    } else if (typeof evt.which == "number" && evt.which > 0) { 
     // In other browsers except old versions of WebKit, evt.which is 
     // only greater than zero if the keypress is a printable key. 
     // We need to filter out backspace and ctrl/alt/meta key combinations 
     return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8; 
    } 
    return false; 
} 

,이 옵션을 선택하십시오 : https://jsfiddle.net/9u9hb839/4/

편집 :

다른 키를 감지하는 것을 방지하기 위해보다는 눌러 char, 내 코드를 업데이트했습니다.

var keypressed = false; 

$("#first").on('keyup', function(e){ 
    console.log('keyup'); 
    if(keypressed){ 
    $("#second").focus(); 
    } 
    keypressed = false; 
}); 

$("#first").on('keypress', function(e){ 
    console.log('keypress'); 
    keypressed = isCharacterKeyPress(e); 
}); 

function isCharacterKeyPress(evt) { 
    if (typeof evt.which == "undefined") { 
     // This is IE, which only fires keypress events for printable keys 
     return true; 
    } else if (typeof evt.which == "number" && evt.which > 0) { 
     // In other browsers except old versions of WebKit, evt.which is 
     // only greater than zero if the keypress is a printable key. 
     // We need to filter out backspace and ctrl/alt/meta key combinations 
     return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8; 
    } 
    return false; 
} 

이 시도 : https://jsfiddle.net/9u9hb839/9/

모바일 (사파리, 크롬)에서 테스트

및 데스크탑 (크롬, 파이어 폭스)를

Answer 2

모바일 환경에서도 작동 내가 찾은 유일한 해결책 :

function moveFocus(evt, id) { 
     setTimeout(function() { 
      document.getElementById(id).focus(); 
      document.getElementById(id).select(); 
     }, 100); 
}