尽管输入获得焦点，但无法在 Android 移动网站上的 HTML 输入字段中输入文本答案

【问题标题】：Can't enter text into HTML input field on Android mobile website, though input gets focus尽管输入获得焦点，但无法在 Android 移动网站上的 HTML 输入字段中输入文本
【发布时间】：2020-12-06 02:13:11
【问题描述】：

我正在尝试在我的三星 Galaxy Android 手机附带的默认浏览器中查看我的网站，但它无法正常工作。我似乎无法在弹出登录表单中输入文本。当我尝试输入我的用户名时，HTML 输入获得焦点并且预测搜索开始工作，但它不会在输入字段中输入任何文本。但是，我可以在页面上的其他表单输入中成功输入文本（这些表单不在弹出 div 中）。

我猜这与我的表单位于用户单击登录按钮时出现的绝对定位 div 的事实有关。

我的几个同事已经在他们的安卓手机上尝试过该页面，并且能够按他们应该的方式输入文本，所以我认为这是一个操作系统/浏览器特定的问题。我正在运行 Android 2.3.3 并使用随附的默认浏览器。

这是登录 div 和表单输入的 css：

.loginPanel{z-index:2000;width:341px;border-bottom-left-radius:3px;border-bottom-right-   radius:3px;background:#3DB44A;position:absolute;clear:left;margin:0 0 0     0;top:57px;display:none;padding:5px 0 0 0;}

.loginPanel input[type=text]{width:280px;height:40px;margin:0 auto;display:block;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font:bold 12px Arial;color:#353535;padding:0 10px;}

这里是 HTML

<div class="loginPanel" style="margin-left: -246px; display: block;">
<form id="user_form_login" class="global_form_box" enctype="application/x-www-form-urlencoded" action="/login" method="post">
<div class="close">
<a id="login-close" href="#">
<img alt="" src="themes/network90v2/landing_images/close.png">
</a>
</div>
<div class="clear">
<input id="email" type="text" placeholder="Email" name="email">
</div>
<div id="username-required" class="form-label-required">
<span class="form-block-required">email is required</span>
</div>
<div id="username-invalid" class="form-label-required">
<span class="form-block-required">email is not valid</span>
</div>
<div class="clear">
<input id="password" type="password" placeholder="Password" name="password">
</div>
<div id="password-required" class="form-label-required">
<span class="form-block-required">password is required</span>
</div>
<div class="clear forgotten">
<span>
<a href="/user/auth/forgot">Forgot Password?</a>
</span>
</div>
<div class="submit-top"></div>
<div class="remember submitMain">
<input id="login-submit" type="submit" value="Login">
<input id="remember" type="checkbox" name="remember" value="1" tabindex="4">

记住我

我希望可以使用 CSS 解决此问题。如果有人有解决方案/遇到同样的问题，我将非常感谢您的帮助。

PS 我真的希望将登录表单保留为弹出窗口，因此理想情况下，任何解决方案都允许我这样做。

【问题讨论】：

标签： android html css mobile

【解决方案1】：

我的移动网站在 Android 2.2 上表现异常，我也遇到过类似的问题。从记忆中，我不得不使用 position: fixed 而不是 absolute 来绕过它。但不确定这是否适用于您的设计。

【讨论】：