我试图在我的三星Galaxy Android手机附带的默认浏览器中查看我的网站,但它无法正常工作。我似乎无法将文本输入弹出式登录表单。当我尝试输入我的用户名时,HTML输入会获得焦点并且预测搜索开始起作用,但它不会在输入字段中输入任何文本。但是,我可以成功地将文本输入到我页面上的其他表单输入中(这些表单不在弹出式div中)。
我猜这与我的表单位于用户单击登录按钮时出现的绝对定位div这一事实有关。
我的几个同事已经在他们的Android手机上试过这个页面,并且能够按原样输入文本,所以我认为这是一个OS /浏览器特定的问题。我正在运行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我真的更喜欢将登录表单保留为弹出窗口,所以理想情况下,任何解决方案都允许我这样做。
答案 0 :(得分:0)
我在移动网站上遇到类似的问题,在Android 2.2上表现得很奇怪。从记忆中,我不得不使用position: fixed
而不是绝对来绕过它。不确定这是否适用于您的设计。