我有一个非常奇怪的问题,它给我们的访问者带来了很多问题。
在普通文本字段上,Chrome(和其他浏览器)会建议要预填充的字符串。当您悬停它们并将鼠标移开时,它们不会被选中并写入文本框中。
但是,在我的设置中,我遇到了一个奇怪的情况。当我悬停我的选项,然后移动鼠标时,它会选择框中的一个元素。这会导致出现大量“请输入电子邮件”消息,而用户会在屏幕上看到一封电子邮件。
请参阅此视频中的问题: https://www.youtube.com/watch?v=Vh2nb0_IR3Q
我对这封特定电子邮件的标记:
<input type="text" name="Email" placeholder="E-mail" id="newUserEmail" class="email_input newinputtxt">
有没有人有提示?因为我真的迷路了...
编辑:
完整的 ASP.NET MVC 标记:
<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>
最佳答案
所以几年前一直在使用 Wordpress 的室友来到我的电脑前说:
“将其包裹在表单标签中!”
所以我告诉他这是个糟糕的主意,他说“试试吧”。
我做到了。
而且他妈的成功了。
所以 tl;dr -> 将它包裹在一个 form 标签中,它起作用了……我要哭了。
关于html - 文本框上的自动填充(在 Chrome 中)会导致在不按输入的情况下进行预填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25978776/