Skip to content
Override the enter key as a Tab key for data enter screens.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
jquery.livequery @ 1987c04


Overdrive is used to add special key bindings to a form for productivity purposes.

Overrides the enter button to a tab key. Allows you to define a set of fields to jump between. The default hotkey for jumping fields is F11. You can use a different key by defining it’s keyCode as a parameter as shown below.

Based on: and other such plugins.

Tested using Firefox 3.6.


jquery 1.4.2 or above (Tested on 1.7.1) jquery.livequery


You can use the exact version of livequery by use of submodules.

git submodule update --init jquery.livequery


Add the following to the bottom of your $(document).ready section


Or if you want to allow enter to submit when on top of the submit button:

$(":input").overdrive({submit_after: true});

Allowing a some jump fields

$(":input").overdrive({submit_after: true, jump: ['product_name', 'product_code']});

Jump fields and setting the jump key to keyCode 122 which is F11.

$(":input").overdrive({submit_after: true, jump: ['product_name', 'product_code'], jump_key_code: 122});

Allow F12 to submit the form.

$(":input").overdrive({submit_key_code: 123});

Allow moving around fields with the characters Ctrl+[ for up and Ctrl+] for down. The user can also define their own. I have had trouble using the up & down arrow as some browsers bring up a list on text fields. Note: all field_nav keys must use the ctrl button. So you could use some of the alpha characters and they will not be entered into fields.

$(":input").overdrive({field_nav: true });

Example of field_nav overriding the default keybindings to ‘-’ & ‘=’ for up & down respectively.

$(":input").overdrive({field_nav: true, field_up: 45, field_down: 61 });

Highlight on focus

If you would like to Highlight your fields on focus then just add a ‘highlight’ style to your CSS file. EG:

 .highlight { background-color: yellow; }


If you would like to focus a field you first should add the following to your document ready area:

the_focus = link.attr('the_focus');

If no attribute called ‘the_focus’ exists then the first input box is focused.

Here is how you focus a specific field:

<p><%= link_to "New Product", new_product_path, :id => "new_product", :class => 'ajax', :target => 'content', :accesskey => 'ctrl+a', :the_focus => "#product_code" %></p>

Date plugin

If you are using the date plugin:

Then you can take advantage of the automatic next functions and keybindings I have created for this plugin.

Add the following to your $(document).ready or live area:

$.auto_next_date("<date field id>", "<field name directly after your date field>");

EG: product_release_date is the date field and product_price is the field directly under.

$.auto_next_date("#product_release_date", "#product_price");
Something went wrong with that request. Please try again.