Javascript 以编程方式关注mobile safari中的下一个输入字段

我的行中有几个输入字段，其作用类似于填字游戏答案行：

每个方块都有自己的输入字段。原因之一是，有时广场可以预先填充。现在，在桌面浏览器上，只要输入字符，光标就会跳到下一个输入字段。使用以下方法，效果非常好：

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

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

---

我知道

focus（）

触发器在ios上有一些限制，但我也看到了一些使用合成点击等的解决方法。

我找到了一个可能适合您的解决方法

IOS/Safari仅在触摸事件处理程序中“接受”焦点。我触发了一个触摸事件，并将

.focus（）

插入其中。我用Safari在我的iPhone3S和iPhone5S上试用了这个功能，效果很好：

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

演示
（在演示中按“下一步”按钮）

#hidebox{位置：绝对；边框：无；背景：透明；填充：1px；}
#hidebox:焦点{大纲：0；}

window.onload=函数（）{
document.getElementById（“mFirst”）.focus（）；
}
变量数组=[“mFirst”、“mSecond”、“mThird”、“mFourth”]；
功能键控（e）{
var curId=array[Number（e.getAttribute（“at”））-1]；
var nextId=array[Number（e.getAttribute（“at”））]；
var curval=e.值；
变量字母=/^[0-9a-zA-Z]+$/；
如果（如值匹配（字母））{
document.getElementById（curId）.value=curval；
if（e.getAttribute（“at”）在移动浏览器中以编程方式移动到下一个输入字段而不关闭键盘似乎是不可能的。（这是一个糟糕的设计，但这正是我们必须处理的。）然而，一个聪明的方法是用Javascript交换输入元素的位置、值和属性，这样看起来就像你正在移动到下一个字段，而实际上你仍然关注同一个元素。下面是jQuery插件的代码，它交换
id
，
name
和value。你可以调整它来交换其他属性也要确保修复所有已注册的事件处理程序

$.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;
};

此处演示：
我希望这就是您要找的-

$(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();
    }
  });
});

在这里检查代码-

UIWebview具有属性
KeyboardDisplayRequireservation

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

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

preference name=“KeyboardDisplayRequireservation”value=“false”
我在safari ios上遇到了同样的问题。在登录页面上，我以编程方式关注用户输入一条短信代码后的下一个输入字段。
我触发了输入更改自动聚焦事件。我通过添加延迟修复了该问题

有关详细信息，请参阅下面的代码


this[`focusInstRef${index}`]=el}
onChange={（值）=>{
value&&index！==5&&setTimeout（（）=>{this[`focusInstRef${index+1}`].focus（）}，5）；
vAppStore.SetSMCodeArr（值，索引）；}
}
/>
这是有效的，因为您的开始事件是一个点击（鼠标事件）。如果您尝试使用其他事件作为开始事件（除了鼠标事件），它将不起作用。此链接可能会有所帮助：@darkyndy“开始”点击事件是真实的还是触发正常？@Wytze-从我看到的情况来看，它一定是真实的事件（用户交互）非常聪明——不幸的是我的情况下不起作用——我想在键盘输入上导航（例如，n或n或ENTER）.看。我简直不敢相信这已经得到了20张赞成票，为什么还要费心创建touchevents之类的东西呢？只要把焦点放在onClick中，它就会工作，问题是没有人的代码中有click事件。成功了吗？聪明。如果你用
nextel.detach（）；
而不是
nextel.remove（））；
，这些字段也将可重用。（
remove（）
也会删除绑定的侦听器）如果输入之间有元素，这将不起作用。请参阅@RubenSandwich是的，此示例代码做出了许多假设，但可以通过更新
.next（）
和
.before（）来调整它以适应任何位置的元素
删除下一个表单元素并在需要的地方重新插入。这正是我一直在寻找的Cordova应用程序！非常感谢。你怎么知道to正在开发一个混合应用程序？他用“javascript”、“jquery”、“iOS”和“mobile safari”标记了他的问题.这根本不能回答问题.至少这是无关的。
$(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();
    }
  });
});