9

I have the following Javascript code. Here I am using onKeyPress="someFunction( )" in the body tag to get the keyCode of the key that is pressed.

The code is working fine in IE8 but this is not working in Firefox.

Please give some solution to this.

<html>
<head>
<title>onKeyPress( ) event not working in firefox..</title>
<script>
function printDiv()
{
  var divToPrint=document.getElementById('prnt');
  newWin=window.open(''+self.location,'PrintWin','left=50,top=20,width=590,height=840,toolbar=1,resizable=1,scrollbars=yes');
  newWin.document.write(divToPrint.outerHTML);
  newWin.print();
  //newWin.close();
}
</script>

<script>
function keypress()
{
  alert(event.keyCode);
  var key=event.keyCode;
  if(key==112 || key==80)
 printDiv();
  else if(key==101 || key==69)
    window.location="http://google.com";
  else if(key==114 || key==82)
    window.reset();  
}
</script>
</head>
<body bgcolor="lightblue" onkeypress="keypress()">

Here is the total code which is working fine in IE8 and not working in Firefox.

<!DOCTYPE html>
<html>
    <head>
    <title>Please help me out</title>
    <script type="text/javascript">
    function printDiv()
    {
      var divToPrint=document.getElementById('prnt');
      newWin=window.open(''+self.location,'PrintWin','left=50,top=20,width=590,height=840,toolbar=1,resizable=1,scrollbars=yes');
      newWin.document.write(divToPrint.outerHTML);
      newWin.print();
    }
    </script>

    <script type="text/javascript">
    function keypress(val)
    {
      //-----------------------------------------------------   
      //alert('nnnn');
      //alert(window.event ? event.keyCode : val.which);  
      //if(val.which != 0 && val.charCode != 0)
      // alert('Firefox'+String.fromCharCode(val.which));
      //else
      // alert('IE'); 
      //------------------------------------------------------- 
      var key=event.keyCode;
      if(key==112 || key==80 || val=="print")
        printDiv();
      else if(key==101 || key==69 || val=="exit")
        window.location="http://google.co.in";
      else if(key==114 || key==82 || val=="refresh")
        document.forms[0].reset();  
      else
        event.returnValue=true;
    }
    </script>
</head>
<body bgcolor="lightblue" topmargin="0" leftmargin="0"marginwidth="0px" marginheight="0px" onkeypress="keypress(null)">
<table align="left" border="1" cellpadding="5" cellspacing="0" style="width: 100%;height:100%">
<tbody>
<tr><td width="20%" valign="top">ccccccccccc</td>
    <td width="80%" align="center">
        <table style="width: 100%" border="0" valign="top">
        <tr align="right">
        <td valign="top">
        <button value="refresh" accesskey="R" onclick="keypress(this.value)">
            <b><u>R</u></b>efresh
        </button>
        <button value="print" accesskey="P" onclick="keypress(this.value)">
            &nbsp;&nbsp;<b><u>P</u></b>rint&nbsp;&nbsp;
        </button>
        <button value="exit" accesskey="E" onclick="keypress(this.value)">
            &nbsp;&nbsp;&nbsp;<b><u>E</u></b>xit&nbsp;&nbsp;&nbsp;
        </button>
        </td></tr>
        </table> 
        <h3>Press the letters P->Print , E->Exit etc....</h3>   
        <h1>Just a test for keypress event</h1>
        <form action="http://google.co.in" method="Post">
            <div id="prnt">
                zzzzzzzzzzzzzzz
            </div>
        </form>
    </td>
</tr>
</tbody>
</table></body></html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nirmal
  • 115
  • 1
  • 1
  • 6
  • Could you describe exactly what it is you're trying to achieve? – Tim Down Dec 21 '10 at 11:03
  • I am trying to assign one function(say Print the page) to the key " P " through onKeyPress event. I am using Windows XP , IE8 , Firefox. My problem is: In Firefox the onKeyPress event not returning any keyCode that I need to call a specific function. But in IE8 its working. – Nirmal Dec 21 '10 at 12:33

4 Answers4

12

When problems like this show up, I start to use any kind of a JavaScript framework. Those frameworks are build to avoid problems with different browsers.

To catch all different keypress() apis, like the link from Emmett shows, can be very difficult.

Example:

In HTML head:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

In the JS tag:

$(document).keydown(function(event) {
 alert('You pressed '+event.keyCode);
 event.preventDefault();
});
powtac
  • 40,542
  • 28
  • 115
  • 170
9

Browsers have different ways of handling keyboard events. Have a look at http://unixpapa.com/js/key.html for more info.

For example, these changes to your code will get it working in Firefox:

<body bgcolor="lightblue" onkeypress="keypress(e)">

and

function keypress(e) {
    alert(window.event ? event.keyCode : e.which);
    // other stuff
}
Emmett
  • 14,035
  • 12
  • 56
  • 81
  • 1
    but I don't understand what is this "e" inside the keypress(e) – Nirmal Dec 21 '10 at 10:28
  • 3
    the "e" is the "event" which is passed into this function when sombody pressed any key. "e" is an object with diffrent properties, for example the keycode. You can access the property by calling e.keyCode. – powtac Dec 21 '10 at 10:37
7

Pass event object as an parameter and your code will work in IE as well as firefox. The code example is as follows :

<body bgcolor="lightblue" onkeypress="keypress(event)">

function keypress(event) {
  alert(event.keyCode);
  var key=event.keyCode;
  if(key==112 || key==80)
      printDiv();
  else if(key==101 || key==69)
      window.location="http://google.com";
  else if(key==114 || key==82)
      window.reset();  
}
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
Kumar
  • 71
  • 1
  • 1
-1

I think Firefox are not caring programmers... and this is the reason why so, In Firefox navigator.appName returns "Netscape". so user can edit his code like,

if(navigator.appName == "Netscape") 
    Key = event.charCode; //or e.which; (standard method)
else 
    Key = event.keyCode;
Vinay
  • 2,564
  • 4
  • 26
  • 35