jQuery focus seems to cause internet explorer 9 to execute twice. This problem doesn't happen in older versions of IE, and doesn't happen in Firefox or Chrome.
I'm having a user enter a code in an input field. On enter or submit the code gets sent through a load to another script (ajax). The code in the input field is removed, and the focus is brought back.
The result of that script is inserted in a div on the same page.
$(document).ready(function(){
$('#code').keyup(function(e){
if(e.keyCode == 13){
console.log('Code submitted through enter');
sendcode($('#code').val());
}
});
function sendcode(b){
console.log('function sendcode used');
$('#Result').load('scan.php?code=' + b);
$('#code').val('');
$('#code').focus();
};
$('#Submit').click(function(){
console.log('Code submitted through click');
sendcode($('#code').val());
});
});
However, the focus() seems to be the problem since when I remove it the problem is gone. I have tried placing the focus() in any place of the code but without success. Is there any alternative to focus() that achieves the same or can it somehow be fixed?
NETWORK:
URL: /scan.php?code=stackoverflow
URL: /scan.php?code=
CONSOLE: (when hit enter)
Log: Code submitted through click
Log: function sendcode used
Log: Code submitted through enter
Log: function sendcode used
You can see the second load doesn't carry the code variable either.
Change the Submit
button to a span
or div
and style it.
<span id="Submit">Submit</span>
Demo: Fiddle
You can also look at this answer, where adding an attribute type="button"
to the button element is suggested.