ansaurus

Question

Enter key press behaves like a Tab in Javascript

Answer 1

+2 A:

You could programatically iterate the form elements adding the onkeydown handler as you go. This way you can reuse the code.

Byron Whitlock 2009-06-17 22:23:57

This is what I ended up doing. Thanks!

Ross 2009-06-18 16:44:05

Answer 2

A:

If you can I would reconsider doing this: the default action of pressing while in a form submits the form and anything you do to change this default action / expected behaviour could cause some usability issues with the site.

Ian Oxley 2009-06-18 09:26:24

Normally I would agree, but our app lets users set stuff like this separately for their own accounts, and the client is offering money for it, so I don't think we can justify holding our ground.

Ross 2009-06-18 14:21:10

Answer 3

A:

I had a simular need. Here is what I did:

  <script type="text/javascript" language="javascript">
    function convertEnterToTab() {
      if(event.keyCode==13) {
        event.keyCode = 9;
      }
    }
    document.onkeydown = convertEnterToTab;    
  </script>

Bobby Ortiz 2009-12-09 16:52:17

Answer 4

A:

Changing this behaviour actually creates a far better user experience than the default behaviour implemented natively. Consider that the behaviour of the enter key is already inconsistent from the user's point of view, because in a single line input, enter tends to submit a form, while in a multi-line textarea, it simply adds a newline to the contents of the field.

I recently did it like this (uses jQuery):

$('input.enterastab, select.enterastab, textarea.enterastab').live('keydown', function(e) {
 if (e.keyCode==13) {
  var focusable = $('input,a,select,button,textarea').filter(':visible');
  focusable.eq(focusable.index(this)+1).focus();
  return false;
 }
});

This is not terribly efficient, but works well enough and is reliable - just add the 'enterastab' class to any input element that should behave in this way.

Andrew 2010-10-04 16:17:56

ansaurus

tags:

views:

answers:

Enter key press behaves like a Tab in Javascript

related questions