当webview登录页面遇到华为密码保险箱

        华为EMUI 9.0之后升级了一个很好用的功能： "密码保险箱"。可以很"智能" 的记住各种App的账号密码，号称：专治密码健忘症。

        但是当我的App在webview里使用html页面再次进行App登录的时候（之前已经使用密码保险箱保存了密码），遇到了下面这个“坑”：居然直接把我的密码显示出来了，按理应该显示选择要登录的用户名。

         进入【设置】->【密码保险箱】，发现保险箱里识别的用户名和密码完全反了。用户名存成了密码，密码存成了用户名。

登录html页面登录区域代码大致如下：

<div class="pr">
    <input type="text" id="username" class="form-control um-no-brs" value="">
    <input type="password" id="password" class="form-control um-no-brs" value="">
</div>

         经过一顿搜索、分析、改属性，猜测华为通过识别type=password的input来识别账号密码，但是最终账号密码却识别反了。

第一次修改

         交换两个input顺序。

<div class="pr">
    <input type="password" id="password" class="form-control um-no-brs" value="">
    <input type="text" id="username" class="form-control um-no-brs" value=""> 
</div>

       见鬼了，可以识别正确了，但是需要我总不能让用户先输入密码再输入用户名吧！改css把两个顺序交换过来，这是鬼操作不是我想要的？

第二次修改

        随便再加一个input试试

<div class="pr">
    <input type="password" id="hidepwd" name="hidepwd" style="display:hidden"/>
    <input type="text" id="username" class="form-control um-no-brs" value=""> 
    <input type="password" id="password" class="form-control um-no-brs" value="">
</div>

      用户名识别正确了，但是密码不能自动填充了，估计是多了个type=password自动填充到另一个上了。

第三次修改

       那我把input注释掉吧

<div class="pr">
    <!--<input type="password" id="hidepwd" name="hidepwd" style="display:hidden"/>-->
    <input type="text" id="username" class="form-control um-no-brs" value=""> 
    <input type="password" id="password" class="form-control um-no-brs" value="">
</div>

奇迹发生

         密码保险箱终于乖乖听话了，能正常识别了。

结语         

         目前仍不知道华为密码保险箱识别html页面用户名密码的的原理，具体是因何原因发生用户名密码识别相反了。本文提供两种hack解决方式，在mate 30 pro上验证可行，其他华为手机请大家自行验证吧。