Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Is there any way to make the enter key on my Mac keypad function as a tab to fill out online forms quicker?

more options

On some web forms, it would be great to be able to use the numeric keypad with enter key to enter many numbers on a website with one hand while keeping place on my paper forms with other. It is the only thing left that is slowing me down on my Mac.

On some web forms, it would be great to be able to use the numeric keypad with enter key to enter many numbers on a website with one hand while keeping place on my paper forms with other. It is the only thing left that is slowing me down on my Mac.

Chosen solution

Thanks for the email. It turns out that the form designer assigned a lot of duplicate taborder values (i.e., 10, 10, -1, 10, 10, -1), so the script was confused trying to find the next higher taborder value.

This revised version simply goes in order rather than trying to find the logically next box. I'd name this one EnterInFormN for "natural order" to distinguish it from the other one.


javascript:(function(){function jfspress(e) {var evt = (e) ? e : window.event; var key = (evt.keyCode) ? evt.keyCode : evt.which; if (key!=13) return true; var target = (evt.target) ? evt.target : evt.srcElement; if (!target.form) return true; var nod = "input|select|textarea"; if (nod.indexOf(target.nodeName.toLowerCase())<0) return true; var inpTypes = "text|file|checkbox|radio|select-one"; if (target.getAttribute("type")) {if (inpTypes.indexOf(target.getAttribute("type").toLowerCase())<0) return true;} else {if (target.className != "enterExits") return true;} var els = target.form.elements; for (var i=0; i<els.length; i++){if (els[i]==target) {if (i==els.length-1) {return true;} else {var eldex = i;break;}}} for (var j=eldex+1; j<els.length; j++){if (els[j].tabIndex!=-1 && els[j].disabled==false && els[j].type!="hidden") {els[j].focus();return false;}} alert("Not handled; eldex="+eldex);return false;} function setup(){var forms = document.getElementsByTagName("FORM"); for (var i=0; i<forms.length; i++){forms[i].onkeypress=jfspress;}} setup();})();

(placed code in pre tags - c)

Read this answer in context 👍 0

All Replies (12)

more options

This would make a useful add-on. (Or a useful Greasemonkey userscript.) I didn't see one in a quick search, but perhaps someone has created one?

(I created a page years ago showing how it could be done, but that's really of no direct use to you. Maybe someone else can use this code and run with it. http://dev.jeffersonscher.com/jscher2000/Enter-Does-Tab2.html)

more options
more options

Jscher's link is exactly what I'm looking for. I don't think Cor-el's form filling extensions would work as the numbers I am entering are rarely the same. The entry is repetitious, but the data is different.

Any other ideas?

Modified by travis351

more options

Maybe Jefferson can confirm that this bookmarklet version works.
I've removed the // comments as that was easier than to change them all to /* */


javascript:(function(){/* http://dev.jeffersonscher.com/jscher2000/Enter-Does-Tab2.html */
function jfspress(e) { 
 var evt = (e) ? e : window.event;
 var key = (evt.keyCode) ? evt.keyCode : evt.which;
 if (key!=13) return true;

 var target = (evt.target) ? evt.target : evt.srcElement;
 if (!target.form) return true;
 var nod = "input|select|textarea";
 if (nod.indexOf(target.nodeName.toLowerCase())<0) return true;
 var inpTypes = "text|file|checkbox|radio|select-one";
 if (target.getAttribute("type")) {
  if (inpTypes.indexOf(target.getAttribute("type").toLowerCase())<0) return true;
 } else {
   return true;
 }

 var els = target.form.elements;
 for (var i=0; i<els.length; i++){
  if (els[i]==target) {
   if (i==els.length-1) {
    return true;
   } else {
    var eldex = i;
    break;
   }
  }
 }
 if (target.tabIndex!=0) {
  var minTI = 999;
  var minTIel = -1;
  for (var k=0; k<els.length; k++){
   if (k!=eldex && els[k].tabIndex>=target.tabIndex && els[k].tabIndex<minTI && 
       els[k].disabled==false && els[k].type!="hidden") {
    minTI = els[k].tabIndex;
    minTIel = k;
   }
  }
  if (minTIel>-1) {
   els[minTIel].focus();
   return false;
  }
 }

  for (var j=eldex+1; j<els.length; j++){
  if (els[j].tabIndex==0 && els[j].disabled==false && els[j].type!="hidden") {
   els[j].focus();
   return false;   
  }
 }
 alert("Not handled; eldex="+eldex);
 return false;
} 

function setup() {
 var forms = document.getElementsByTagName("FORM");
 for (var i=0; i<forms.length; i++) {
  forms[i].onkeypress=jfspress;
 }
} 
setup();})();

edited to add () to setup()

Modified by cor-el

more options

I think you just need ()


setup();

Next we need the original poster to test on a representative form to see whether the original script covered all the bases or whether it needs enhancement.

more options

I am new to modifying browsers. Where should I put the code?

more options

A bookmarklet is a snippet of javascript that you run manually from the location bar or, more conveniently, from the Bookmarks Toolbar.

First, copy the entire code to the clipboard.

Next, if you are not displaying the Bookmarks Toolbar, use View > Toolbars > Bookmarks Toolbar to display it.

Right-click on the Bookmarks Toolbar (or Mac equivalent of right-click!) and choose New Bookmark.

Paste the code into the Location box (the second box).

Then type a useful name in the Name box (e.g., EnterInForm) and click Add.

Now, when you want to add the feature to a page, click the button to run the script.

I realize that manual clicking is a hassle, so the next step probably would be to convert the script to a Greasemonkey userscript. I am interested in doing that, but if you could first provide feedback on how it works and what tweaks it needs, that would be great. (For example, I noticed it doesn't work on "password" fields; pressing Enter in one of those submits the form. Not sure whether this is important for your purposes.)

more options

Wow...a whole new world for me. I set up the bookmarklet and ran it on my form. It worked perfectly from text box 1 to text box 2, which are on the same line. When I press enter to move to text box 3 on the next line it goes back to #1. In fact when I press enter from any box except for #1 it goes back to #1.

more options

That's strange, there must be something about the form that I didn't anticipate. It's capturing the Enter key (the form doesn't submit) but it's navigating incorrectly. Is this on a page I could see (public web site)? If not, I might need to you to email me part of the code of the page. Try my username here (jscher2000) at gmail.com.

more options

Chosen Solution

Thanks for the email. It turns out that the form designer assigned a lot of duplicate taborder values (i.e., 10, 10, -1, 10, 10, -1), so the script was confused trying to find the next higher taborder value.

This revised version simply goes in order rather than trying to find the logically next box. I'd name this one EnterInFormN for "natural order" to distinguish it from the other one.


javascript:(function(){function jfspress(e) {var evt = (e) ? e : window.event; var key = (evt.keyCode) ? evt.keyCode : evt.which; if (key!=13) return true; var target = (evt.target) ? evt.target : evt.srcElement; if (!target.form) return true; var nod = "input|select|textarea"; if (nod.indexOf(target.nodeName.toLowerCase())<0) return true; var inpTypes = "text|file|checkbox|radio|select-one"; if (target.getAttribute("type")) {if (inpTypes.indexOf(target.getAttribute("type").toLowerCase())<0) return true;} else {if (target.className != "enterExits") return true;} var els = target.form.elements; for (var i=0; i<els.length; i++){if (els[i]==target) {if (i==els.length-1) {return true;} else {var eldex = i;break;}}} for (var j=eldex+1; j<els.length; j++){if (els[j].tabIndex!=-1 && els[j].disabled==false && els[j].type!="hidden") {els[j].focus();return false;}} alert("Not handled; eldex="+eldex);return false;} function setup(){var forms = document.getElementsByTagName("FORM"); for (var i=0; i<forms.length; i++){forms[i].onkeypress=jfspress;}} setup();})();

(placed code in pre tags - c)

Modified by cor-el

more options

I assume that the target.className != "enterExits" isn't needed in this code.

if (target.className != "enterExits") return true; ->  return true;
more options

You're right. It doesn't cause any harm, except to make the whole thing more painful to read.