Solved

Capture ESCAPE and Function keys in Firefox with Javascript

Posted on 2009-05-06
7
2,258 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

0
Comment
Question by:dh-s
  • 4
  • 2
7 Comments
 
LVL 8

Expert Comment

by:Haris V
ID: 24313543
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>

0
 
LVL 10

Expert Comment

by:bugada
ID: 24313837
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

0
 

Author Comment

by:dh-s
ID: 24313905
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?
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 10

Accepted Solution

by:
bugada earned 125 total points
ID: 24313963
Following modern unobtrusive javascript, you can also write the code like this:
<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)

         }

      }

</script>

Open in new window

0
 
LVL 10

Expert Comment

by:bugada
ID: 24314012
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.
0
 

Author Comment

by:dh-s
ID: 24314028
Hi, thanks bugada... that is the first code that I have tried that works in Firefox. Thanks.
0
 
LVL 10

Expert Comment

by:bugada
ID: 24314080
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

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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)
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

743 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

15 Experts available now in Live!

Get 1:1 Help Now