Изменить фокус на введенное значение

Question

Моя проблема: я должен сосредоточиться на следующем вводе текста после того, как этот символ вставлен. Этот вход может содержать только один символ, а именно число.

Мое решение (псевдокод):

onKeyUp="nextInput.focus()"

... хорошо работает на рабочем столе, но на мобильном, иногда значение записывается после перемещения по следующим полям (не в ту ячейку).

Мое второе решение:

onChange="nextInput.focus()"

не работает, потому что событие onchange вызывается, только если элемент HTML потерял фокус.

Answer 1

Кажется, работает в моем сафари, iphone:

$("#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/

Редакция:

чтобы предотвратить обнаружение нажатия других клавиш, а не символа, я обновил свой код:

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/

Протестировано в мобильных (Safari, Chrome) и настольных (Chrome, Firefox)

Answer 2

Единственное найденное мной решение, которое работает и в мобильной среде:

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