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

Question

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

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

我的几个同事已经在他们的 Android 手机上尝试过该页面，并且能够按他们应该的方式输入文本，所以我认为这是一个特定于操作系统/浏览器的问题。我正在运行 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 我真的更喜欢将登录表单保留为弹出窗口，因此理想情况下任何解决方案都允许我这样做。

Answer 1

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