ansaurus

Question

When editing a text input, how do I do a specific JavaScript action on hitting "Enter" key without the form's onSubmit handler?

Answer 1

+2 A:

Include the following javascript

<script type="text/javascript">
function noenter() {
    return !(window.event && window.event.keyCode == 13); 
}
</script>

Add the following attribute into the input element that you wish to prevent the submit

onkeypress="return noenter()"

Of course you can perform some other event if you wish...

Buggabill 2009-10-27 19:48:51

+1 - This worked perfectly in initial testing - Thanks! If no better solution (aesthetics wise) is presented in 2 days I'll accept this (nothing personal, I just really hate capturing keyclicks like this :)

DVK 2009-10-27 20:13:14

I do not take it personally. If there is a better solution, I would like to see it too, because ultimately, usability is what you are after.

Buggabill 2009-10-27 20:16:57

This don't works in Firefox, for Firefox you need use var keyCode = event.keyCode ? event.keyCode : event.which, then test keyCode var.

Cesar 2009-10-27 21:33:40

This will not work in browsers other than IE, for two reasons: first the one that Cesar mentioned, and second that only IE refers to the event as `window.event`. See my answer for a cross-browser approach.

Tim Down 2009-10-28 09:12:51

Answer 2

A:

Would you be better off using the document object to detect the Enter action? That way you need make no changes to the HTML form tags. You can assign the search function to the button, although if it's hidden I am not sure how the user would click on it, or you could use something like onblur to capture the user tabbing out of the input control.

James Piggot 2009-10-27 19:58:46

Answer 3

A:

Try adding an attribute "action=javascript:void(0)" as in the example below.

Enter will trigger the same action as clicking on the submit button, but won't reload the page automatically.

<html>
<head></head>
<body>
    <div id="status"></div>
    <form action="javascript:void(0)">
     <input type="text" />
     <input type="submit" value="submit" onclick="document.getElementById('status').innerHTML = 'submitted';"/>
    </form>
    <script>document.getElementById('status').innerHTML = 'page loaded';</script>
</body>
</html>

Mic 2009-10-27 21:22:47

As stated in the question, I don't control the HTML text of the form so this can not be done.

DVK 2009-10-27 21:31:49

sure, but with javascript I guess you could control it

Mic 2009-10-27 21:38:14

Answer 4

+1 A:

Assuming you have a text input something like

<input id="myTextBox" name="foo" value="bar">

... you could do something like this, after the document has loaded, and it will work in all mainstream browsers:

document.getElementById("myTextBox").onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    if (charCode == 13) {
        // Suppress default action of the keypress
        if (evt.preventDefault) {
            evt.preventDefault();
        }
        evt.returnValue = false;

        // Do stuff here
    }
};

Tim Down 2009-10-27 23:50:30

ansaurus

tags:

views:

answers:

When editing a text input, how do I do a specific JavaScript action on hitting "Enter" key without the form's onSubmit handler?

related questions