ansaurus

Question

IE not triggering keyboard event on a form with ONE FIELD

Answer 1

+2 A:

The order of events is:

keydown
keypress
submit
keyup

So by the time your keyup handler would have been called, the form has already started submitting. If the action of the form is a page2.html on the local filesystem, that's going to navigate very quickly and probably move away from the page before keyup can be called; set the action to an external site, on the other hand, and keyup will have time to fire.

Adding the second input field is a different issue: in this case the form is not submitted at all. It is a curious historical quirk that browsers will submit a form that has only one input and no submit button, but refuse to submit a form with more than one input, and no submit button. This goes back to the HTML 2.0 spec:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

HTML 2.0 didn't specify whether or not Enter should be accepted to submit a form in any other circumstances (the intention seems only to have been to duplicate the functionality of the ancient <isindex> element), but browsers of the day seem to have interpreted that to mean that Enter-submission shouldn't happen where there are multiple fields, but then any submit button causes Enter-submission to happen anyway. IE and other later browsers copied this odd behaviour.

Unrelated point: the reliance on window.event makes the code needlessly IE-only. For all other browsers, the event object is passed in as an argument to the event handler function. You can do onkeyup="detectEvent(event)" in the HTML and then use that argument in the detectEvent function, which works on both models because either the local argument event or the global window.event is used. But the usual approach would be to lose the event handler attribute and assign from JavaScript:

<form action="page2.html" id="enterform">
    <p> Field1
        <input type="text" id="text1">
        <!-- Note: *no* trailing slash - the doctype says HTML4, not XHTML -->
    </p>
</form>

<script type="text/javascript">
    document.getElementById('enterform').onkeyup= function(event) {
        if (event===undefined) event= window.event; // for IE
        if (event.keyCode===13)
            alert('You pressed Enter');
    };
</script>

Having said all that... I'm generally suspicious of trapping the Enter key. I'm not quite sure what you're trying to do, but if it's the common case of changing the default button in a form this definitely isn't the way to do it and will cause an assortment of problems. There is no good reason you should be trapping the Enter key to call .submit() on a form.

bobince 2010-03-24 13:07:37

I agree with your answer, usually you should just have a submit handler that returns false if the form is not supposed to be submitted. However, I write a lot of ajax code that doesn't just submit forms and redras the page.So, without worrying about the design, bobince got it correct, you need to listed for they keydown event, since the key event is cancelled when the submit event is fired

Juan Mendes 2010-03-24 14:37:20

@bobince Thanks a lot! that explains the behavior.. *but browsers of the day seem to have interpreted that to mean that Enter-submission shouldn't happen where there are multiple fields, but then any submit button causes Enter-submission to happen anyway. IE and other later browsers copied this odd behaviour.* not the case with Chrome.,.. chrome submits the form on enter button.!

echo 2010-03-25 04:16:06

Where could i learn more about the priority of html events.. ?w3schools doesn't seem to talk about the priorities.

echo 2010-03-25 04:33:01

Unfortunately no, I don't know of any reference for this (certainly not at the always-dodgy w3schools!). The HTML5 spec spends some time on specifying what events do, but it's not very readable and it doesn't cover this case. In general with stuff like this, the ‘default action’ of the primary event is to fire the activation event, if not cancelled. So `keypress` is the primary KeyEvent and by default either triggers a `click` on the default button (or a direct `submit` if there is no button).

bobince 2010-03-25 09:56:28

Similarly the `click` is the primary MouseEvent that causes a button or link to activate (potentially calling more events) whilst `mousedown` and `mouseup` are not. If you're unsure about a case, the best thing to do is put a textarea on the page and have each event handler add a line like `click called` to its `value` so you can log the events in order.

bobince 2010-03-25 09:57:07

Answer 2

+1 A:

Interestingly enough, in Google Chrome, the form with the second input field will still submit, so it never catches the enter key on a keyup event, regardless of how many fields you have.

Solution = use keypress or keydown.

JGB146 2010-03-24 13:10:39

I'm coding for IE only. but yeah, my friend tested the behavior in chrome yesterday, it didn't catch the keydown event.

echo 2010-03-25 04:20:31

ansaurus

tags:

views:

answers:

IE not triggering keyboard event on a form with ONE FIELD

related questions