Solved

Catch Tab & Enter keystroke in an input.

Posted on 2006-07-11
4
17,674 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 29

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 29

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

717 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