Search code examples
javascripthtmldom-eventsdhtml

Input type text and onKeyDown not working under IE


I am writing a WWW application, it has to run under IE. I have the problem with the code that runs under Firefox, 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 Firefox it works correctly.

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>

Solution

  • 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.