We help IT Professionals succeed at work.

JavaScript OnKeyPress Event Not Firing on Tab Key

P1ST0LPETE
P1ST0LPETE asked
on
Experts,

I'm writing some JavaScript for a website I'm working on.

I have several text boxes that look similar to these:

A. <input type="text" id="R1C3" OnKeyPress="HideDropDownOnTabPress(event)" />

B. <input type="text" id="R1C4" OnKeyPress="return TextboxKeyPress(event, this)" />

And my JavaScript functions that handle the OnKeyPress events look like this:

function HideDropDownOnTabPress(event)
{
      alert('hit');
      var keyCode = (event.which) ? event.which : event.keyCode;
      alert(keyCode);
      if(keyCode == 9)
      {
            CloseDropDown();
      }
}

//Allows only numbers to be entered into textbox
function TextboxKeyPress(event, textbox)
{
      var keyCode = (event.which) ? event.which : event.keyCode;
    if ((keyCode > 31 && (keyCode < 48 || keyCode > 57)) || keyCode == 13)
        return false;
    else
        return true;
}

The function TextBoxKeyPress() fires in the latest edition of all the major browsers (Firefox, IE8, Chrome, Safari, Opera) and works just fine.

The HideDropDownOnTabPress() function however, does not fire in all browsers.  It only works in Firefox and Opera.  Chrome, Safari, and IE8 just ignore it.

What am I doing wrong that prevents the HideDropDownOnTabPress() function from firing in Chrome Safari and IE?

What do I need to fix to get this to work.

Thanks.
Comment
Watch Question

Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
Maybe it's because TAB is used to move from field to field.  It may get intercepted by the javascript runtime and not get to your routine.
Commented:
I think you can't achieve this in IE or safari ...

Because there is not yet a standard implemented for this..

See this url... and experiment with a tester JS code at the bottom of this page..

http://www.quirksmode.org/js/keys.html

Hope this helps.

-- YRuZ!

Author

Commented:
Yeah, already visited that page yruz before making this post :-).

Anyway, I figured out a work around by adding the javascript functionality i wanted to the OnFocus event of each Tab-able element of the page.  Thanks for the help though guys - I'll assign points and close out question.  I agree, what I want is probably not possible across all browsers as there isn't any formal standard.  Not that IE follows standards anyway....