开发者

Input type text and onKeyDown not working under IE

开发者 https://www.devze.com 2022-12-25 10:49 出处:网络
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.

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>


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.


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!!);
    }
  }


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.


jQuery fix

document.onkeydown = function (e) {
    var event = jQuery.event.fix(e || window.event);
    var keycode = event.which;
    var isControl = event.ctrlKey;
}


There is a way to make it work without using the <form> tag on your html code.

This is the simplest solution I found that works with IE, Chrome and Firefox at least:

$(function() {
  $("input#q").on('keydown', function(event) {
    if (event.which == 13) {
      document.location.assign("page.aspx?q=" + $("#q").val());
      return false;
    }
  });
});
<input name="q" type="text" />

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号