Question

我有几个输入字段，就像一个填字游戏答案行：

enter image description here

每个方块都有自己的输入字段。其中的原因是有时可以预先填充正方形。现在，在桌面浏览器上，只要输入字符，光标就会跳转到下一个输入字段。使用类似的东西非常有效：

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

但是移动safari（我们在ios上测试）的问题是我不知道如何以编程方式自动“跳转”到下一个输入字段。用户可以通过“下一步”按钮进行操作，但有没有办法自动执行此操作？

我知道focus()触发器对ios有一些限制，但我也看到了使用合成点击等的一些解决方法。

Answer 1

我找到了一个可能对您有用的解决方法。

Apparently 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
});

演示here
（按演示中的下一个按钮）

Answer 2

在不关闭键盘的情况下以编程方式移动到移动浏览器中的下一个输入字段似乎是不可能的。（这是一个糟糕的设计，但它是我们必须使用的。）然而，一个聪明的黑客是用Javascript交换输入元素的位置，值和属性，这样看起来你实际上正在移动到下一个字段你仍然专注于同一个元素。以下是交换id，name和值的jQuery插件的代码。您可以根据需要调整它以交换其他属性。还要确保修复任何已注册的事件处理程序。

$.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/

Answer 3

将此行添加到ios部分的配置文件中

preference name =“ KeyboardDisplayRequiresUserAction” value =“ false”

Answer 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

Answer 5

UIWebview具有属性keyboardDisplayRequiresUserAction

当此属性设置为true时，用户必须显式点击Web视图中的元素以显示该元素的键盘（或其他相关输入视图）。设置为false时，元素上的焦点事件会导致输入视图自动显示并与该元素关联。

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

Answer 6

我在 safari ios 上遇到了同样的问题。在登录页面上，我以编程方式关注用户输入一个短信代码后的下一个输入字段。我触发了对输入更改事件的自动聚焦。我通过添加延迟解决了这个问题。

详情见下方代码

<InputItem
    value={item}
    type='number'
    maxLength={1}
    ref={el => this[`focusInstRef${index}`] = el}
    onChange={(value) => {
        value&&index !== 5 && setTimeout(() => {this[`focusInstRef${index + 1}`].focus()}, 5);
        vAppStore.setSmsCodeArr(value, index);}
    }
/>

Answer 7

<!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>

以编程方式关注移动野生动物园中的下一个输入字段

7 个答案: