Crazy, Random IE Behavior with JQuery

[l008comm]

So here's what I've got. A text input element, and a submit button. It's not a real form, it's fully jQuery'd. So you type a number into the text field, then you either click the submit button, or you can also just hit return in the text field. I have jquery catch both events and do it's thing either way.

But here's where it gets crazy. With both IE9 and IE10 (and no non-IE browsers), when you hit return to submit the faux-form, the page redirects. I can't figure out why or how this is happening. I do have other javascript that redirects the page if you click a different button. But I don't see any way how that code could be activating when you hit return, while the cursor is in a text field.

I'm going to try posting the page itself. All of the relevant javascript code is the page header. If this does't work, I'll reply with the actual code:

[whatsmyip.org...]

[l008comm]

So to be clear, it's the "Custom Port Test". It works normally in every other browser. But if you type in a number in IE, and hit return, the page will get redirected to a new page, as if you had clicked the button under "Server Port Test". It makes no sense to me, why this is.

[lucy24]

Does it also happen on other people's MSIE 9/10? After all the usual clear-the-cache and so on?

The description sounds analogous to what happens if I edit a script while the page is open, and then refresh the page. Instead of clearing all values and starting afresh, any existing input is shoveled into some new field.

[l008comm]

But no input into that field, will cause a redirect. And it never has. And my IE9 and IE10 are on completely different virtual machines.

[l008comm]

I just had a friend test it with IE11 and it didn't have the weird behavior, it acted normally.

[l008comm]

For those that don't want to dig through the page to see the code, here is the HTML:

<h2>Custom Port Test</h2>
<p>Check a single port
<p>Port Number: <input id="single_port" type="text" name="id" size="5" maxlength="5" class="input_class" autocomplete="off"> <input type="submit" value="Scan Port" id="single_scan">
<div id="scan_results" class="scan_closed">Enter a port number above to scan</div>

<div id="scan_progress"><img src="../images/spinner.gif" id="spinner" alt="&hellip;"> Scanning...</div>

And here is the javascript:

$(function() {

$("#server_scan").click(function(){ window.location.href = 'server/'; });
$("#game_scan").click(function(){ window.location.href = 'games/'; });
$("#app_scan").click(function(){ window.location.href = 'apps/'; });
$("#p2p_scan").click(function(){ window.location.href = 'p2p/'; });

$("#single_port").focus(function()
{
$("#single_port").removeClass("input_error");
$("#scan_results").attr("class","scan_closed");
$("#scan_results").html("Enter a port number above to scan");
});

$("#single_scan").click( single_scanner );
$("#single_port").keypress(function($e)
{
if ( ( $e.which == 13 ) && ( $("#single_scan").prop('disabled') == false ) )
{ single_scanner(); }
});

function single_scanner()
{
$filtertest = /^[0-9]{1,5}$/;
$port_number = $("#single_port").val();

if ( $filtertest.test( $port_number ) && $port_number >= 1 && $port_number <= 65535)
{
$("#scan_results").html( $("#scan_progress").html() );
$("#scan_results").attr("class","scan_closed");
$("#single_port").removeClass("input_error");
$("#single_scan").prop('disabled', true);

$.post("single.php", { port: $port_number }, function($data)
{
if ($data === "1")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_open");
$("#scan_results").html("Port "+$port_number+" is Open");
}
else if ($data === "2")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_blocked");
$("#scan_results").html("Port "+$port_number+" Timed-Out");
}
else if ($data === "3")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_closed");
$("#scan_results").html("Port "+$port_number+" is Closed");
}
else if ($data === "4")
{
play_a_sound('snd_fail');
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: A Server Error Occurred");
}
})
.fail(function()
{
play_a_sound('snd_fail');
$("#single_port").addClass("input_error");
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: A Network Error Occurred");
})
.always(function()
{
$("#single_scan").prop('disabled', false);
});

}
else
{
play_a_sound('snd_fail');
$("#single_port").addClass("input_error");
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: Invalid Port Number ("+$port_number+")");
}
}

});

I can't see how it could ever be the case, that a return keypress event in $("#single_port") , could trigger a click event on $("#server_scan") , that's certainly not anywhere in MY code!?

[l008comm]

I made an extremely simplified test case of the problem here:
[whatsmyip.org...]

That page doesn't actually DO anything, but turn the result box green, no matter what. IE still redirects the page. I don't see why.

Or if you prefer, here are the guts of that test page, in a jsfiddle:
[jsfiddle.net...]

[l008comm]

GAH of course in the fiddle itself, the erroneous redirect doesn't happen. But that might be a limitation of that site, I don't know.

[l008comm]

So even sticking a $e.preventDefault(); inside the keypress handler, does not stop IE9 and IE10 from completely arbitrarily redirecting the browser.

[l008comm]

I was just poking around with it some more. In IE9, you can see the "Server Port" button get focus when you hit return in the input field. There is no sane reason why this would happen. But with that clue, I tried adding tabindex attributes to all of the inputs on the page, so the "Custom Port" text field and button were number 1 and 2, and the four buttons above it were 3-6. I was hoping this would cause the correct button, number 2, to get focus instead of the server port button. But it had no effect. Why microsoft, why!?!?