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

Question

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

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

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

但是移动safari(我们在ios上测试)的问题是我不知道如何以编程方式自动"跳转"到下一个输入字段.用户可以通过"下一步"按钮完成,但有没有办法自动执行此操作？

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

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

在这里演示
(按演示中的下一个按钮)

Answer 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/