Программно ориентируйтесь на следующее поле ввода в мобильном сафари

У меня есть несколько полей ввода в строке, которые действуют как линия ответа на кроссворд:

Каждый квадрат имеет свое собственное поле ввода. Причина этого заключается в том, что иногда квадрат может быть предварительно заполнен. Теперь, на рабочем столе браузера курсор переходит к следующему полю ввода всякий раз, когда вводится char. Это работает очень хорошо, используя что-то вроде:

$(this).next('input').focus();

Но проблема в мобильном сафари (мы тестируем на ios) заключается в том, что я не знаю, как автоматически "прыгать" в следующее поле ввода программно. Пользователь может сделать это с помощью кнопки "Далее", но есть ли способ сделать это автоматически?

Я знаю, что триггер focus() имеет некоторые ограничения на ios, но Ive также видел некоторое обходное решение с использованием синтезированных кликов и т.д.

Ответ 1

Я нашел обходной путь, который может работать на вас.

По-видимому, IOS/Safari "принимает" фокус только внутри обработчика событий касания. Я вызвал сенсорное событие и вставил .focus() в него. Я попробовал это на своих iPhone3S и iPhone5S с Safari, и это работает:

var focused = $('input:first'); //this is just to have a starting point

$('button').on('click', function () { // trigger touch on element to set focus
    focused.next('input').trigger('touchstart'); // trigger touchstart
});

$('input').on('touchstart', function () {
    $(this).focus();   // inside this function the focus works
    focused = $(this); // to point to currently focused
});

Демо здесь
(нажмите кнопку "Далее" в демоверсии)

Ответ 2

Программное перемещение в следующее поле ввода в мобильном браузере без отклонения от клавиатуры кажется невозможным. (Это ужасный дизайн, но это то, с чем мы должны работать.) Однако умный взлом заключается в замене позиций, значений и атрибутов входных элементов на Javascript, так что похоже, что вы переходите к следующему полю, когда на самом деле вы все еще сосредоточены на одном и том же элементе. Вот код для плагина jQuery, который меняет местами id, name и значение. Вы можете адаптировать его для замены других атрибутов по мере необходимости. Также обязательно исправьте любые зарегистрированные обработчики событий.

$.fn.fakeFocusNextInput = function() {
    var sel = this;
    var nextel = sel.next();
    var nextval = nextel.val();
    var nextid = nextel.attr('id');
    var nextname = nextel.attr('name');
    nextel.val(sel.val());
    nextel.attr('id', sel.attr('id'));
    nextel.attr('name', sel.attr('name'));
    sel.val(nextval);
    sel.attr('id', nextid);
    sel.attr('name', nextname);
    // Need to remove nextel and not sel to retain focus on sel
    nextel.remove();
    sel.before(nextel);
    // Could also return 'this' depending on how you you want the
    // plug-in to work
    return nextel;
};

Демо здесь: http://jsfiddle.net/EbU6a/194/

Ответ 3

Добавьте эту строку в ваш конфигурационный файл в разделе ios

preference name = "KeyboardDisplayRequiresUserAction" value = "false"

Ответ 4

Надеюсь, это то, что вы ищете -

$(document).ready(function() {
  $('input:first').focus(); //focus first input element

  $('input').on('keyup', function(e) {
    if(e.keyCode == 8) {  //check if backspace is pressed
      $(this).prev('input').focus(); 
      return;
    }
    if($(this).val().length >= 1) { //for e.g. you are entering pin
      if ($(this).hasClass("last")) {
        alert("done");
        return;
      }
      $(this).next('input').focus(); 
    }
  });

  $('input').on('focus', function() {
    if(!$(this).prev('input').val()){
      $(this).prev('input').focus();
    }
  });
});

проверьте код здесь -

https://jsbin.com/soqubal/3/edit?html,output

Ответ 5

UIWebview имеет свойство keyboardDisplayRequiresUserAction

Если для этого свойства установлено значение true, пользователь должен явно коснуться элементов в веб-представлении, чтобы отобразить клавиатуру (или другое соответствующее представление ввода) для этого элемента. Если установлено значение false, событие фокусировки на элементе автоматически отображает представление ввода и связано с этим элементом.

https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

Ответ 6

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
     #hidebox {position:absolute; border: none; background:transparent;padding:1px;}
     #hidebox:focus{outline: 0;}

    </style>
</head>

<body>

<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1">
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)">
</li>
<script type="text/javascript">

window.onload = function() {
     document.getElementById("mFirst").focus(); 
}
var array = ["mFirst","mSecond","mThird","mFourth"];
function keyUp(e) {
  var curId = array[Number(e.getAttribute("at"))-1];
  var nextId = array[Number(e.getAttribute("at"))];
  var curval= e.value;
var letters = /^[0-9a-zA-Z]+$/;
if(e.value.match(letters)){
  document.getElementById(curId).value = curval;
  if(e.getAttribute("at") <= 3){
  var nextPos = document.getElementById(nextId).offsetLeft;
  e.setAttribute("at",Number(e.getAttribute("at"))+1);
  e.style.left = nextPos+"px";
  }
 e.value = ""
}else {
 e.value = "";
}
} 
function keyDown(e) {
    var curId = array[Number(e.getAttribute("at"))-1];
    document.getElementById(curId).value = "";
} 

function onFocus(e) {
  document.getElementById("hidebox").focus();
  document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at")));
  document.getElementById("hidebox").style.left = e.offsetLeft+"px";
  document.getElementById("hidebox").style.top = e.offsetTop+"px";
}

</script>
</body>
</html>