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等它会处理没有那么宽松。