How to set input focus?

Question

I am developing a WebApp and want to create a kind of login screen with html. For this I have four input fields, which focus on the next field after a number has been typed in.

In osX safari this works without any problems. Unlike iOS on my iPhone. Yoo-hoo.

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

See my code:

$('.text').on('input', function() {
  $(this).next('input').focus()
});

.text {
  margin: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="text" />
<input type="text" class="text" />
<input type="text" class="text" />
<input type="text" class="text" />

The focus is working quite fine on webBrowsers like safari or chrome but not for iPhone iOS safari like to can see in this gif - The focus get's lost and the keyboard disappears:

What I've found during my research was e.g this question:

• Programmatically focus on next input field in mobile safari

• Mobile Safari: Javascript focus() method on inputfield only works with click?

But none of the answers did the job for me because whether they are not working / they are to jerky or they use a workaround that is not really working with my styles like http://jsfiddle.net/EbU6a/194/ did.

So any help how to fix this would be really appreciated. Thanks in advance!

Answer 1

Since I am pretty sure that someone will get this problem too, I decided to answer my own question.

So I've fixed the issue partly using this line of code:

myWebView.keyboardDisplayRequiresUserAction = false

I found the solution while reading the apple documentation for UIWebView.

Please see this reference.

Answer 2

I am affraid iOS does not allow you to focus programatically. You can try workaround from here