I have a series of HTML input elements:
<input type="number">
<input type="number">
<input type="number">
etc...
I want to move focus from the current input to the next input when the 'input' event is triggered on the current input. It's simple to do this and it works great... except in Safari on iOS 5.1 (perhaps others, this is the first mobile device I've checked). Here's what works on most desktops:
$('input').on('input', function(){
$(this).next().focus();
});
I've read several posts about this issue (e.g. Programmatically focus on next input field in mobile safari) and it's apparently by design, to prevent the keyboard popping up unnecessarily on this device. The solutions seem to be to call the focus
event on touchstart
. However, I've tried that and it still doesn't work. It just results in the current input being blank after a number has been pressed on the keyboard.
The code I've tried is as follows:
$('input').on('input', function(){
$(this).next().trigger('touchstart');
});
$('input').on('touchstart', function(){
$(this).focus();
});
Here's a fiddle: http://jsfiddle.net/jfk35hp2/2/.
Can anyone suggest how to get this working on iOS 5?