以编程方式专注于移动Safari上的下一个输入字段 [英] Programmatically focus on next input field in mobile safari

问题描述

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

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

  $（this）.next（'input'）。 
  

但是移动Safari（我们在ios上测试）的问题是我不知道如何以编程方式自动跳转到下一个输入字段。用户可以通过下一步按钮来做到这一点，但有没有办法自动做到这一点？

我知道焦点）触发器对ios有一些限制，但是我也看到了一些使用合​​成点击的解决方法。

解决方案

我找到了一个解决方法，可能适用于您。

.focus（）。我在iPhone3S和iPhone5S上用Safari浏览器试过这个功能：

  var focused = $（'input：first'）; //这只是有一个起点
 
 $（'button'）。on（'click'，function（）{//触发元素设置焦点
。 （'input'）。trigger（'touchstart'）; //触发touchstart 
}）; 
 $ b $（'input'）。on（'touchstart'，function（）{
 $（this）.focus（）; //在这个函数中焦点工作
焦点= $（this）; //指向当前集中的
}）; 
  

Demo 这里

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

I have several input fields in line that acts like a crossword answer line:

Each square has it’s own input field. The reason for this is amongst other things that sometimes a square can be pre-populated. Now, on desktop browser the cursor jumps to the next input field whenever a char is entered. That works really well using something like:

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

But the problem on mobile safari (we test on ios) is that I don’t know how to automatically "jump" to the next input field programatically. The user can do it via the the "next" button, but is there a way to do this automatically?

I know that the focus() trigger has some limitations on ios, but I’ve also seen some workaround using synthesized clicks etc.

解决方案

I found a workaround that might work for you.

Apparently IOS/Safari only "accepts" the focus when inside a touch event handler. I triggered a touch event and inserted the .focus() inside it. I tried this on my iPhone3S and iPhone5S with Safari and it works:

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

Demo here
(press next button in demo)

这篇关于以编程方式专注于移动Safari上的下一个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！