[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Catch Tab & Enter keystroke in an input.

Posted on 2006-07-11
4
Medium Priority
?
17,678 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 1500 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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

656 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