CODEWITHSUNDEEP
ruby-on-rails
inglesp
inglesp

Reputation: 3357

"Tab order" in a rails app

In a rails app, I want users to be able to enter data without having to use a mouse.

To help do this, I want to set the order in which the cursor moves to text fields, drop-down boxes, and buttons.

Is there a way to do this?

Upvotes: 9

Views: 5706

Answers (6)

Dan Herman
Dan Herman

Reputation: 1505

If you're using simple_form you'll need to do it like so:

<%= f.input :name, input_html: {:tabindex => 1} %>

Upvotes: 4

Jeff Peterson
Jeff Peterson

Reputation: 1449

<%= f.text_field :attribute, :tabindex => 1 %>

then 2, 3, 4, etc.

Edit: Removed underscore from "tab_index". So close.

Also, you can make a helper method to automatically increment the index:

def tabindex
  @tabindex ||= 0
  @tabindex += 1
end

Upvotes: 3

Mikkel Paulson
Mikkel Paulson

Reputation: 91

Jeff Peterson is almost right.

<%= f.text_field :attribute, :tabindex => 1 %>

Upvotes: 9

marcgg
marcgg

Reputation: 66455

I'm not 100% sure but I suppose you can take control of the Tab function to manage yourself the order.

In pseudo code that would make something like that

all_fields = ["field1","field2"]
current = 0
if catch event("tab pressed"){
 current = (current+1) %all_fields.size
 all_fields[current].focus
}

Once the element is selected using the keyboard you can type whatever or use the arrows to browse a dropdown menu.

You can also use tabindex http://www.w3.org/TR/html401/interact/forms.html but I never did it so I'm not sure if it would be working fine.

Last solution would be to put the fields in the order you want people to edit them.

Upvotes: 0

brettkelly
brettkelly

Reputation: 28215

I'm not a rails guy, but I've used other web MVC-ish frameworks. Just a caveat :)

When you're outputting your form elements, you should be able to add additional attributes to each (such as class, onchange, etc.). You can accomplish what you want by setting the tabindex value for each, incrementing it as you go. The resulting html would look something like this:

<input type="text" id="myInput" tabindex=1 />
<select id="mySelect" tabIndex=2>
    <option id="myOpt1" value="someValue">Foo!</option>
</select>

Something like that would do job.

Also, it looks like this question has already been posted :)

Upvotes: 1

Mike Woodhouse
Mike Woodhouse

Reputation: 52326

I haven't tried doing this (but perhaps I should). Anyhow, w3.org has this: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access which briefly describes the use of the tabindex attribute. I imagine you'd have to set it individually on your controls, which would be a little tiresome, but not dreadfully so.

I don't know if it will work, but you might consider using increments of, say, 100, so that additions in between existing controls can be made without needing to resequence the whole control list every time.

Upvotes: 0

Related Questions