QQ手机浏览器中无法显示密码框的解决办法

时间：2024-04-17 14:30:35
开发的wap网站有用户反应QQ手机浏览器中不显示密码登陆框，于是使用了QQ手机浏览器1.2和1.4版（SymbianV5版本）进行测试，发现的确存在这个问题。但使用opera和UC web均没有出现这个问题。QQ手机浏览器截图如下：

注意如图所示，密码框<input type="password" />部分并没有显示出来。

查看源码，发现其中的html代码使用并不规范：

<form name="myform" method="post" id="myform" action="/login">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM2MTU3MzA1NmRk" />
</div>
  用户名或邮箱:<br />
  <input name="txtUserName" type="text" maxlength="30" id="txtUserName" size="23" />
  <div class="mtop5"><label>密码:</label></div>
  <input name="txtPassword" type="password" maxlength="20" id="txtPassword" size="23" /><br />
  <input type="submit" name="btnLogin" value="登录" id="btnLogin" /><br /><br />
</form>

使用web developer验证其html代码，发现其中存在不合理嵌套的问题，一是<input>元素不应该独立放置，而应当放置在div或p等块级元素内部。w3c的html验证错误为“character data is not allowed here”和"document type does not allow element "input" here; missing one of "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag"。

于是html代码重新处理下，新的如下：

 

<form name="myform" method="post" id="myform" action="/login">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM2MTU3MzA1NmRk" />
</div>
  <p class="normal">用户名或邮箱:</p>
  <p><input name="txtUserName" type="text" maxlength="30" id="txtUserName" size="23" /></p>
  <p class="mtop5"><label>密码:</label></p>
  <p><input name="txtPassword" type="password" maxlength="20" id="txtPassword" size="23" /></p>
  <p><input type="submit" name="btnLogin" value="登录" id="btnLogin" /></p>
</form>

检查后通过了w3c的验证：

页面也显示正常了，如下图所示。

考虑原因可能是QQ手机浏览器采用了比较严格的html解释引擎，相对opera、UC web等它会处理没有那么宽松。

相关文章