Link to home
Start Free TrialLog in
Avatar of raterus
raterusFlag for United States of America

asked on

Catch Tab & Enter keystroke in an input.

Hi,

I'm having the hardest time with this, I know there are plenty of examples to do this, but I can't seem to get it working.

I have a page that shows a grid of input textboxes.  When someone hits tab OR enter in these boxes, I want to fire a function.  I'm having trouble finding a cross-browser way to determine what keystroke they pressed.  Does someone have a quick function that will catch a keypress in a input box, and depending on if they hit a tab or enter, run some code.  I need this to work, at the very least, in IE and Firefox.

Thanks,
--MIchael
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

This is a example of how to detect (and prevent) tab and enter key event on text fields.

This is a cross browser solution, try it yourself. You can plug in appropriate action (doAction()...)


<html>
<head>
<title>Disable Enter and Text </title>

<script language="javascript">
function BrowserType () {
      var srchText = navigator.userAgent;
      var brwTypes = ("Opera,MSIE,Netscape,Firefox").split(',');
      for (var ix=0; ix < brwTypes.length; ix++) {
            if (srchText.toString().match(brwTypes[ix])) {
                  return brwTypes[ix];
            }
      }
      return null;
}
var brwType = BrowserType();
function doAction (evt) {
      return false;

      if (evt) {
            evt.returnValue = false;
            evt.cancelBubble = true;
      }
      else {
            alert ('Bad Event Object');
      }
}

function kH(e) {
      evt = (e) ? e : window.event;
      var type = evt.type;
      var pK = e ? e.which : window.event.keyCode;
      if (pK == 9) { pK = 13; evt.keyCode = 13; }
      if (pK == 13) {
             doAction (evt);
             return false;
      }
      if (pK == 9 || pK == 0) {
            doAction (evt);
            return  false;
      }
}

function DisableEnterAndTab ()
{
      if (!brwType) { return; }
      if (brwType == 'MSIE') {
            document.onkeypress = kH;
            document.onkeydown = kH;
      }
      else if (brwType == 'Firefox') {
            document.onkeypress = kH;
      }
      else if (brwType == 'Netscape') {
            document.onkeypress = kH;
            if (document.captureEvents) {
            document.captureEvents (Event.KEYPRESS);
            }
      }
      else {
            alert ('UnSupported Browswer');
      }
}
DisableEnterAndTab();
</script>
</head>

<body>
<form name="MyForm" onSubmit="alert('No you did not disable them'); return;">
<br>
<input type="text" name="t1" value="">
<br>
<input type="text" name="t2" value="">
<br>
<input name="TheText">
<br>
<input type="submit">
</form>
</body>
</html>
Avatar of raterus

ASKER

hi pravinasar,

I don't need to disable tab & enter for every field, just certain ones.  I was hoping for a method that would allow me to attach an event handler like so

<input type="text" onkeypress='catchtabenter("somedataIneed");' />
ASKER CERTIFIED SOLUTION
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of raterus

ASKER

Thanks, here's what I ended up using, it works great between both browsers

<script language="javascript">

 var nextID = null;
 function kH(e) {
     var code;
     
     if (!e) var e = window.event
       if (e.keyCode) code = e.keyCode;
       else if (e.which) code = e.which;
     
     if((code==13)||(code==9))
     {
            document.getElementById(nextID).focus();
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            return false;
       }else{
         return true;
       }
}
 
function catchtabenter (evt, cNextID) {
    nextID = cNextID;
    return kH(evt);
}

</script>

<input type="text" name="text1" onkeydown='return catchtabenter(event, "somedataIneed");' />