StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The previous IE-version allowed the non standard writable <code>event.keyCode</code> property, IE9 now conforms to the standards. </p> <p>You may want to consider the <em>functionality</em> you are after: you want to make the enter key behave like the tab key, i.e. moving the focus to the next (text) input field. There are more ways to do that. One of them is using the <code>tabindex</code> attribute of the text input fields. If you order the fields in your form using this tabindex attribute, the functions I present here may yield the same result as your previous keyCode method. Here are two functions I tested in <a href="http://jsfiddle.net/JQKQf/" rel="nofollow">this jsfiddle</a>. An (text) input field now looks like:</p> <pre><code><input type="text" onkeypress="nextOnEnter(this,event);" name="" value="" tabindex="1"/> </code></pre> <p>the functions to use for tabbing:</p> <pre><code>function nextOnEnter(obj,e){ e = e || event; // we are storing all input fields with tabindex attribute in // a 'static' field of this function using the external function // getTabbableFields nextOnEnter.fields = nextOnEnter.fields || getTabbableFields(); if (e.keyCode === 13) { // first, prevent default behavior for enter key (submit) if (e.preventDefault){ e.preventDefault(); } else if (e.stopPropagation){ e.stopPropagation(); } else { e.returnValue = false; } // determine current tabindex var tabi = parseInt(obj.getAttribute('tabindex'),10); // focus to next tabindex in line if ( tabi+1 < nextOnEnter.fields.length ){ nextOnEnter.fields[tabi+1].focus(); } } } // returns an array containing all input text/submit fields with a // tabindex attribute, in the order of the tabindex values function getTabbableFields(){ var ret = [], inpts = document.getElementsByTagName('input'), i = inpts.length; while (i--){ var tabi = parseInt(inpts[i].getAttribute('tabindex'),10), txtType = inpts[i].getAttribute('type'); // [txtType] could be used to filter out input fields that you // don't want to be 'tabbable' ret[tabi] = inpts[i]; } return ret; } </code></pre> <p>If you don't want to use tabindex and all your input fields are 'tabbable', <a href="http://jsfiddle.net/q65z9/" rel="nofollow">see this jsfiddle</a></p> <p>[<strong>EDIT</strong>] edited functions (see jsfiddles) to make use of event delegation and make it all work in Opera too. And <a href="http://jsfiddle.net/KooiInc/AYTs6/" rel="nofollow">this version</a> imitates shift-TAB too.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload