1

I'm trying to auto-tab text fields whenever a key is pressed (so only one letter goes in each input).

I've attached the following to the keyup event on the inputs:

var next = $(e.target).next();
while(next.length && !next.is('input')) next = next.next();
next.focus();

In a browser this looks for the next input (or the end of the form) and moves to focus to it. Works perfectly.

On an iOS device, though, it looks like it's working in the sense that the next input gets all focus styling, but the keyboard goes away and you have to touch an input to get it back.

How do I get around this?

edit: in response to the negative feedback to auto-tabbing. Let me rephrase the question:

I'm building a very simple, iPad specific, trivia game for a client. Answer the question, hit next, answer the question, hit next, type of thing. We have a number of question formats: multiple choice, scrabble style rearrange the letters, and... a "Wheel of Fortune"-ish fill in the word question.

I'm doing this by having n inputs representing the letters in the word, and having to tab (hit next on an iPad) each letter is a pain.

How might I go about build this question format for iPad?

nicholas
  • 14,184
  • 22
  • 82
  • 138
  • did you set tabindex for those fields? – Grumpy Jul 05 '12 at 21:06
  • Possible duplicate of [this question](http://stackoverflow.com/q/4609765/901048) -- See also https://github.com/jquery/jquery-mobile/issues/3016 – Blazemonger Jul 05 '12 at 21:09
  • Doesn't look like it's possible -- I would look at rearranging your code so that one text field is used. – Blazemonger Jul 05 '12 at 21:12
  • There are tabindexes on there. Though I just put them in for good measure and don't see how they would make a difference. The javascript is finding and focusing the inputs without using the browsers tabbing. – nicholas Jul 05 '12 at 21:13
  • Possible workaround hack: http://typeof.it/30/how-to-show-the-virtual-keyboard-using-javascript-in-ios/ (Found all these in Google, by the way) – Blazemonger Jul 05 '12 at 21:14
  • 1
    FWIW: Don't. Auto-tabbing is annoying enough on a desktop computer. It's *infuriating* on a mobile device. – Chris Pratt Jul 05 '12 at 21:14
  • @blazemonger: Thanks. Yeah, I found that solution too. The problem is it still requires a user to touch something to trigger the keyboard, and doesn't work on the keyup or keypressed event on the previous input... I'll keep looking. – nicholas Jul 05 '12 at 21:33
  • @chris: depends on the situation. – nicholas Jul 05 '12 at 21:34
  • Again, just speaking a user and not a developer here, I've never seen a situation where auto-tabbing *increases* accessibility or usability. It's one of those things that clever developers do to be clever because they think it makes things "easier", but that's judgment not born out by facts. Particularly on mobile devices, which tend to have software keyboards, switching inputs closes and reopens the keyboard, which creates a disorienting effect, and context is often a larger problem on smaller screens, where the user may not even realize they're in a different field now. – Chris Pratt Jul 05 '12 at 21:46

1 Answers1

2

You can't force-trigger a keyboard in iOS using JavaScript. While you easily set focus on a field, the keyboard will only appear upon a user-initiated interaction (tap).

(I also agree with the comments that in most cases, auto-tabbing is a bad idea from a UX perspective to begin with.)

EDIT: in regards to the wheel of fortune aspect, you could simply build your own keyboard. The bonus would be that you could gray out the letters already chosen.

DA.
  • 39,848
  • 49
  • 150
  • 213