IE not triggering keyboard event on a form with ONE FIELD_问答_开发者

IE not triggering keyboard event on a form with ONE FIELD

开发者 https://www.devze.com 2022-12-25 00:21 出处：网络

I\'m seeing my Friend\'s code here... <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

I'm seeing my Friend's code here...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>

<script>

    function detectEvent(){
    if(window.event.keyCode==13)
        {
            alert("you hit return!");
        }

    }
</script>


</HEAD>

<BODY>
    <form name="name1" onkeyup="detectEvent()" action="page2.html">
        <p> Field1
            <input type="text" id="text1"/>
        </p>
    </form>
</BODY>
</HTML>

and when he tried entering a value in the textbox and pressed enter, it did not call the detectEvent(). I said, it'll always call onSubmit on enter button..... and he surprised me,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>

<script>

    function detectEvent(){
    if(window.event.keyCode==13)
        {
            alert("you hit return!");
        }

    }
</script>


</HEAD>

<BODY>
    <form name="name1" onkeyup="detectEvent()" action="page2.html">
        <p> Field1
            <input type="text" id="text1"/>
        </p>
        <p> Field1
      开发者_开发知识库      <input type="text" id="text2"/>
        </p>
    </form>
</BODY>
</HTML>

Now press enter, The function gets called..... Why so!?

Why onKeyUp not called on forms with just one field.!!! am i missing something?

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.

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.