Autofill on textbox (in Chrome) results in being prefilled without pushing enter - html

Question

I have a very strange issue, that results in quite a lot of problems for our visitors.
On a normal textfield, Chrome (and other browsers) suggests strings to prefill. When you hover them and move the mouse away, they are not selected and written in the textbox.
However, in my setup, I have a weird case. When I hover my options, and then move the mouse it, it selects an item in the box. This results in an awful lot of "please enter an email" messages, while the user sees an e-mail on their screen.
See problem in this video:
https://www.youtube.com/watch?v=Vh2nb0_IR3Q
My markup for this particular e-mail:
<input type="text" name="Email" placeholder="E-mail" id="newUserEmail" class="email_input newinputtxt">
Does anyone have a hint? Because i am really lost...
EDIT:
Full ASP.NET MVC markup:
<asp:Content ID="Content1" ContentPlaceHolderID="plhMain" runat="server">
<h2>Indtast e-mail adresse</h2>
<div class="checkout__section checkout__section--login checkout_auth">
<div class="single_login">
<div id="newUserBox">
<div id="provideUserEmailBox">
<div class="email_auth">
<div>
<input type="text" name="Email" placeholder="E-mail" id="newUserEmail" class="email_input newinputtxt" />
</div>
<span class="red auth-error-text" style="display: none;" id="invalidEmailText">Der skal indtastes en gyldig e-mail</span>
<ul class="red_checkmarks" style="margin-top: 5px;">
<li>Vi bruger e-mail adressen til at sende en bekræftelse pa din ordre</li>
<li>Hvis du vil, kan du logge ind eller oprette en konto på næste side.</li>
</ul>
</div>
</div>
<div id="createNewUserBtnBox">
<input id="newUserBtn" type="button" class="button button--primary" value="Fortsæt" />
<span class="red auth-error-text" id="createNewUserErrorText"></span>
</div>
</div>
</div>
<div id="socialLoginList">
<button class="pfacebook" type="button" name="provider" value="facebook" title="Log ind med din Facebook konto">
Facebook
</button>
<button class="pgoogle" type="button" name="provider" value="google" title="Log ind med din Google konto">
Google
</button>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#newUserEmail").keypress(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
$("#newUserBtn").click();
}
});
var auth = CheckoutAuthorizationFlow({ LoginUserBox: "#loginWithUserBox", NewUserBox: "#newUserBox" });
auth.Init();
var facebookLogin = function () {
var loginUrl = '/login?returnurl=' + encodeURIComponent(document.location.href) + '&r=' + (new Date().toUTCString()) + '&provider=facebook';
//alert('facebook login');
document.location.href = loginUrl;
return;
};
var googleLogin = function () {
var loginUrl = '/login?returnurl=' + encodeURIComponent(document.location.href) + '&r=' + (new Date().toUTCString()) + '&provider=google';
document.location.href = loginUrl;
return;
};
$(".pfacebook").click(facebookLogin);
$(".pgoogle").click(googleLogin);
});
</script>
</asp:Content>

Answer 1

So my roommate, who has been working a bit with Wordpress a couple of years back, just came by my computer and said:
"Wrap it in a form tag!"
So I told him that was a horrible idea, and he said "try it".
And I did.
And it fucking worked.
So tl;dr -> wrap it in a form tag, and it works... I'll go cry.