We help IT Professionals succeed at work.

Capture ESCAPE and Function keys in Firefox with Javascript

dh-s
dh-s asked
on
2,516 Views
Last Modified: 2013-12-07
Hi,

I am attempting to write a web app that uses key presses for different things. I wish to be able to use the Escape key and Function in Javascript to call a funtion, and can in Internet Explorer and Google Chrome (not all function keys, but F6 onwards, which is enough), but can't in Firefox.

Now, what I am using it for will be only used on a certain number of computers, each of which I am able to modify settings on, so I am trying to find a way that I can either alter a Firefox setting, or install an extension, that will allow Javascript to use the Escape Key and the Function Keys (and possibly disable some of the default browser action of some of these, such as F3 which is search page).

The code that I have attached is what I am using to capture keys currently (goes in the <head> tag), and will capture F8. Also, this is simply copied and pasted code, but if there is a better way to capture the key (which I am sure there is), that would also be appreciated).
<script>
document.onkeydown = function getcode(ev) {
 
value = (window.external) ? event.keyCode : ev.keyCode;
 
//tells you the code of the button which was pressed
//F5 = 116, F8 = 119
 
if (window.external) {
		if (event.keyCode == 119 || value == 119) {
			alert("You pressed F8");
		}
	} else {
		if (ev.keyCode == 119 || value == 119) {
			alert("You pressed F8");
		}
	}
}
</script>

Open in new window

Comment
Watch Question

Commented:
please check this link,

1. http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

and


<html>

<head>

<script>
      function keypress()
      {
            if(event.keyCode == 27){ // Capture Esc key
                                            window.close();
            }
      }
</script>

</head>

<body onkeyup="keypress()">

</body>

</html>

Commented:
To be crossbrowser you need to modify your function as follow

<script>
      function keypress(e)
      {
         e = e || window.event;
         var keyCode = e.which || e.keyCode; 
         if(keyCode == 27){ // Capture Esc key
             window.close();
         }
      }
</script>

Open in new window

Author

Commented:
The script supplied (even the cross browser one) works PERFECT in Internet Explorer, but not Firefox.

I need it to be able to work in Firefox... is there anything that I need to modify in the settings?
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Commented:
remember that the code inside the if (window.external) { } block will never be executed by FF or other browser rather than IE.

If you don't need it, remove it, or make an else branch for other browsers.

Author

Commented:
Hi, thanks bugada... that is the first code that I have tried that works in Firefox. Thanks.

Commented:
glad that helped you.

Another tip: if you want prevent the default action (like reloading the page after a F5 keypress) just add a return false; at the end of the function.
<script>
 
      document.onkeydown = function(e) {
         e = e || window.event;
         var keyCode = e.which || e.keyCode; 
         switch(keyCode) {
            case 27:
              alert("you pressed ESC");
              break;
            case 119:
              alert("you pressed F8");
              break;  
            default:
              alert("you pressed a not handled key: " + keyCode)
         }
         return false; // prevent default behaviour
      }
</script>

Open in new window

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.