I was fixing a bug in a jsp page in which even though a function is defined with onkeypress event to click a particular button (actually its an image of button with onclick property associated with it) when the page is opened first time and then enter key is pressed its throwing an error.
When I debugged the code then I find out that actually two calls are made simultaneously. i.e. the first button with onclick property is also clicked.
Here is just a sample code:
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
on pressing enter key both functions are getting called.
I was fixing a bug in a jsp page in which even though a function is defined with onkeypress event to click a particular button (actually its an image of button with onclick property associated with it) when the page is opened first time and then enter key is pressed its throwing an error.
When I debugged the code then I find out that actually two calls are made simultaneously. i.e. the first button with onclick property is also clicked.
Here is just a sample code:
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
on pressing enter key both functions are getting called.
Share Improve this question edited Jun 2, 2020 at 7:00 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Oct 3, 2013 at 6:40 user2644549user2644549 1412 silver badges13 bronze badges 2- works fine for me jsfiddle/JH8ce – Arpit Srivastava Commented Oct 3, 2013 at 7:12
- i am working for ie8 only.. so try on that – user2644549 Commented Oct 3, 2013 at 8:15
3 Answers
Reset to default 4The following will probably work. By preventing the default action of the keypress it should stop the browser from triggering the standard "form submit" — which is what I think is happening.
function handleEnter(e)
{
e || (e = window.event); /// support for both ie and non-ie browsers
if(e.keyCode==13)
{
alert('nothing');
// old ie support
e.cancelBubble = true;
e.returnValue = false;
// non-ie
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
}
}
You have to bear in mind though that if you are preventing default for enter on the whole page, it will stop it working for textareas and other places where enter might be used. If this is a problem you could decide whether or not to prevent the default action depending on:
var elm = e.srcElement || e.target;
elm should contain the triggering element of the event. scrElement is for old IE and target is for non-IE browsers. For example, you could use this to shortcircuit your code before reaching the prevent default.
if ( elm.nodeName == 'textarea' ) return;
I don't have IE8 lying around to test this however, but considering the following link, it is likely to work:
http://support.microsoft./kb/298498
I know this is an old question, but I did not find any other questions/answers for this, and I was having this same issue with buttons.
But for some reason when I look at the "event" that is passed into javascript function, there is no keyCode passed in with it, so I can not distinguish which key was pressed. FYI "event" was only passing in isTrusted property (and nothing else), but that is another question for another time...
My solution was that I just added a button with onclick="return false;" and style="display:none;" in front of all the other elements so that the ENTER key affects this element and is essentially ignored, and is invisible. With onclick='return false;' the form will NOT be submitted. With onclick='return true;' the form WILL be submitted.
<button id='prevent-onclick-on-enter' style='display:none;' onclick='return false;'/>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
SECOND ANSWER So this is maybe for a slightly different issue that only involves BUTTONS (not INPUTS), but this may be good to know for some people (like me) that did not know this... When you have a button in a form, it defaults to type "submit" which means the first button in a form will have its onclick event triggered by the ENTER key. To prevent this from happening, simply assigm type="button" to the button, and enter key will no longer affect it.
as jsherk mentioned, any unintended onclick should have type="button" and will stop firing when enter is pressed