2

I have a bunch of input fields on a page that need to work for people who just use their keyboard to tab through and fill everything out.

One of those text fields does some extra work when certain text is entered into it. At the end of that work I want the focus to be taken off of that input field. I've used $(this).blur(); to take off the focus.

The problem is then that after that, when you press tab on your keyboard you start at the beginning of the page. How do I blur but keep the tab position on the page?

NOTE: I can not use any type of:

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

because the next input could potentially be another type of input that initiates something else when being focused on. So I don't want the user to experience that something else until they have actively selected/tabbed to it.

Here's a jfiddle example of what I'm talking about: http://jsfiddle.net/DqVvf/1/

Try clicking on the first input, entering something, pressing tab to go to the "zip" field, then press the zero key on your keyboard. That triggers the blur. Then press tab again and you're taken back to the first input on the page.

rgbflawed
  • 1,957
  • 1
  • 22
  • 28
  • Basically, you want the `something else` to be only directly selectable? No tabbing into it! It would probably be helpful if you set up a special CSS class for it.. – DevlshOne Jul 19 '13 at 11:43
  • How do you make an element only directly selectable? – rgbflawed Jul 19 '13 at 11:44
  • I was asking if that's what you wanted? – DevlshOne Jul 19 '13 at 11:45
  • I hadn't thought of tackling the problem through changing the "somethingElse" field. So yeah, if there's an easy way to make "somethingElse" understand that it has received its focus via the $(this).next().focus(), and thus not do its own special stuff, that would be great. – rgbflawed Jul 19 '13 at 11:48

2 Answers2

1

Maybe you could put an invisible input (display:none or similar) between zip and somethingElse, and focus that instead of just blurring zip? Then when the user presses tab, it would move to somethingElse.

eliah
  • 2,267
  • 1
  • 21
  • 23
  • I've done this but added an extra kick... The invisible input (actually a div like this
    ) is created at the end of the special processing code for #zip and then immediately focused on. And then I've defined a binding like this $('.fakeFocus').live('blur',function() { $(this).remove(); }); that will get rid of that fake input once it's tabbed off of. (And I know I'm not supposed to use live anymore!)     – rgbflawed Jul 19 '13 at 12:56
0
Something Else: <input class="denied" tabindex="-1" type='text' id='somethingElse'>

By setting tabindex to -1, you disallow sequential focus navigation.

See this SO question for more info

JSFIDDLE

Community
  • 1
  • 1
DevlshOne
  • 8,357
  • 1
  • 29
  • 37
  • This doesn't work because it totally takes somethingElse out of the tab flow. Plus, this doesn't prevent the blur putting the tab order back to the beginning of the page. – rgbflawed Jul 19 '13 at 11:52
  • Then I am still very unclear about what you're looking to do. – DevlshOne Jul 19 '13 at 11:54
  • $(this).blur(); used by itself makes it so the tabbing position you're at starts at the very beginning of the page. If you do the steps I outlined on that jfiddle you'll see. – rgbflawed Jul 19 '13 at 11:57
  • What is it exactly that you're trying to accomplish? Why is that input so special? Should it not be focusable until something else has had a value assigned? – DevlshOne Jul 19 '13 at 12:12