input type text and onKeyDown not working under IE

Question

Hi there. I am writing a WWW application, it has to run under IE. I have the problem with the code that runs under FF, but i can't get it running under IE.

// JS code

function test()
{
    if (window.event.keyCode == 13)
        window.location.assign("myPage.php");
}

I've tried some similar ways around window.location and location.href, also document.location. I've read that IE has problems with that, so i ask for a solution.

The goal is, that page reloads after typing in some text into <input type='text' name='item_code' onKeyDown='test()'> and click enter. So the result is similar to pressing submit type button below the text input.

Within IE it reloads the same page and nothing happens. In FF it correctly works.

UPDATE 1:

Tried solution given by bobince.

<input type='text' name='item_code'>

<script type='text/javascript' >

document.getElementsByName('item_code')[0].onkeydown = function(event)
{
    if (event == undefined) { event = window.event; }
    if (event.keyCode == 13) { window.location = 'myPage.php'; }

    alert('1');
}

</script>";

The problem is, that if there is alert('1'); line, page shows alert and redirects, if there isn't alert('1'); line, page just reloads to itself. I don't know what is the problem here?

UPDATE 2:

I'am pasting what finally works for me.

<form action='mainPage.php' method='POST'>
    <input type='text' name='item_code'>
</form>

<script type='text/javascript' >
    document.getElementsByName('item_code')[0].onkeydown= function(event)
    {
        if (event == undefined)
        {    
            event = window.event;
        }

        if (event.keyCode == 13)
        {
            var js_item_code = document.getElementsByName('item_code')[0].value;
            window.location = 'myPage.php?item_code='+js_item_code;
            return false;
        }
    };
</script>

Answer 1

try this. it has worked for me earlier.

 <input type="text" onKeyPress="KeyCheck"/>

 function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    if (KeyID == 13 ) {
       alert('key pressed!!);
    }
  }

Answer 2

It should work in general. Two potential problems you may have run into:

1. IE is known to do weird things when using relative links in location.href. Have you tried putting something like http://stackoverflow.com in there?
2. Security settings in IE may prevent the right thing from happening if i.e. you are testing on a local file rather than a web server.

Answer 3

That's strange, because your use of window.event should ensure your function only ever works in IE. That's certainly what happens for me when I try your code. I suspect there is more you're not showing us.

The usual way to handle events in a cross-browser way with inline event handler attributes would be:

<input type="text" name="item_code" onkeydown="test(event)">

function test(event) {
    if (event.keyCode===13)
        window.location.href= 'myPage.php';
}

This works because event in the attribute refers to the global window.event in IE, where in every other browser it refers to a local argument named event passed in to the event handler attribute function.

However, it is generally considered better to avoid event handler attributes and assign handlers from JavaScript itself. In this case you need a check to see which to use:

<input type="text" name="item_code">

// in a script block after the input, or in document-ready code
//
document.getElementsByName('item_code')[0].onkeydown= function(event) {
    if (event===undefined) event= window.event; // fix IE
    if (event.keyCode===13)
        window.location.href= 'myPage.php';
};

In general I would only try to trap Enter keypresses to reproduce/alter default form submission behaviour as a last resort; better if you can to let the form submit to the place you want it to go.