Solved

Catch Tab & Enter keystroke in an input.

Posted on 2006-07-11
4
17,661 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
ID: 17084180
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
ID: 17084327
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
ID: 17085192
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
ID: 17089850
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

910 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

23 Experts available now in Live!

Get 1:1 Help Now