JavaScript - using the "enter key" to initiate actions.

Factual Questions
1

I’ve been writing JavScript programs for a long time now. Still, when I write a program (a calculator, for example), in order to get it running I usually create a “button” which when clicked by the mouse will perform the calculations.
I know there are other things I could do (such as using “mouseover” commands), but is there a way to program JavaScript so that when the “enter” key is clicked, a certain function will be run ?

2

I’m not an absolute expert in JavaScript, but I’ve used it for years.

Several objects support the onKeyDown, onKeyUp, and onKeyPress (combination of the first two) event handlers. Of course, in order for this to work that object must have the focus. You can set the focus with objectname.focus().

You can check which key was pressed by using the window.event.keyCode property in Internet Explorer or, if I recall correctly, the window.event.which property in Netscape. If you want only the Enter key to work, simply check if the keyCode (or whatever) is 13 and return false if it isn’t.

If you don’t want to have to have an object whose sole purpose is to get the focus and act as a key-trap, you can set the onKeyPress (or one of the other two) event handler for the BODY tag in an HTML document.

Quick example for IE:



<html><head><title>TEST</title>
<script>
function f(keyCode) {
 if(keyCode != 13) return false;
 // Desired code to be called when Enter pressed goes here
}
</script>
</head>
<body onKeyPress='f(window.event.keyCode);'>
</body>
</html>

NOTE: If an object (such as a button) has the focus when you press enter, it will first perform whatever its onClick or onKeyPress function is before BODY sees the event. This shouldn’t be too hard to work around, but I’m too tired and lazy to do it at the moment. :slight_smile:

3

BlackKnight
Thank you for the answer.

4

I believe the best solution is to use the onSubmit event handler. This gets called whenever the form would be submitted - when you click the submit button, when you press return on a textfield, etc.

You need to change the button from a generic button to a submit button, and also make the onSubmit call return false so that the form isn’t actually submitted.

Example:


<html>
  <head>
    <title>Test page</title>
    <script language="javascript" type="text/javascript">
      <!--
      function f() {};
      //-->
    </script>
  </head>
  <body>
    <form onSubmit="function(); return false;">
...
    </form>
  </body>
</html>
5

Draknek
Thanks for another suggestion.
However, the scripts I write stay in the same window and I’m guessing that your method would require opening a new page. (I just like the speed of the “same-page” calculations).
Here is one of my calculators and you’ll see what I mean:

http://www.1728.com/unknwn2.htm

6

Yeah, that’s what I meant about needing the onSubmit call to return false.

When the form is submitted, the specified code is run, and if it returns true, it continues submitting the form (making another request, as you say). However, if it returns false, it will stop - it won’t get as far as submitting the form, and requesting the next page.

So in your example script, all that needs to be changed is:


<FORM NAME=eqtn>
changes to
<FORM NAME=eqtn onSubmit="calc(); return false;">

<INPUT TYPE="button"  VALUE="E  N  T  E  R"  ONCLICK =" calc()">
changes to
<INPUT TYPE="submit"  VALUE="E  N  T  E  R">
7

Draknek
Thanks for taking the trouble to rewrite that. And yes, it seems as if I didn’t read your original posting carefully enough.