Solved

Catch Tab & Enter keystroke in an input.

Posted on 2006-07-11
4
17,658 Views
Last Modified: 2008-09-30
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
0
Comment
Question by:raterus
  • 2
  • 2
4 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
Comment Utility
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>
0
 
LVL 33

Author Comment

by:raterus
Comment Utility
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");' />
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
Comment Utility
As I wrote earlier doAction is customizable...

Look at the following example,


<html>
<head>
<title>Enter and Tab </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 pK = 0;
var brwType = BrowserType();
function doAction (evt) {
      window.status = 'Event Type ' + evt.type + ' key ' + pK +  ' Parameter ' + savedParam;
      return false;
}

function kH(e) {
      evt = (e) ? e : window.event;
      var type = evt.type;
      pK = e ? e.which : window.event.keyCode;
      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();
var savedParam = null;
function catchtabenter (evt, params) {
      savedParam = params;
    kH(evt);
      return true;
}
</script>
</head>

<body>
<form name="MyForm" onSubmit="return false;">

<br>Event onkeydown and onkeypress assigned to following text box.

<input type="text" name="text1" onkeydown='return catchtabenter(event, "somedataIneed");' onkeypress='return catchtabenter(event, "somedataIneed");' />
<br><input type="submit">
</form>
</body>
</html>
0
 
LVL 33

Author Comment

by:raterus
Comment Utility
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");' />
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now