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>
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:
- 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?
- 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" />
精彩评论