关于浏览器自动展示用户名密码等输入框的解决办法

Posted 2020-10-11 cj杨

       最近发现一个bug，在浏览器提交用户名和密码之后，一般都会提示要不要记住密码。假如选择记住之后，那么有下次提交表单的时候，就会自动填充。虽然很方便，但是对于某些项目的部分功能，根据需求，是不需要记住的。需要采用一定的手段来阻止浏览器自动填充。

　　以下是对我百度到的解决办法进行系统性的陈述。

　　（1）使用html属性 autocomplete="off"

　　　　　由于autocomplete这个属性没有被写入W3C规范，因此很多浏览器都会忽略这个属性。导致无法禁用自动填充。

　　（2）使用js在页面加载的时候设置input的value为空

　　　　　　由于浏览器的自动填充是在js执行完后再填充的。在使用js设置了input的value为空后，浏览器又把input自动填充，无法解决问题。并且对于一些特殊要求，比如说要在input文本框里面展示提示语，那么就不能置为空。

　　（3）使用document.getElementById("myForm").reset();

　　　　　在body中添加onload事件，可以实现重置操作，但是在使用了该方法后，页面效果不好，会有闪现。

　　（4）增加<input type=”password”/>     这个方法在大部分版本的浏览器上是可行的，但是在某些高版本的浏览器和Safari中失效。

　　<!-- 额外增加的input -->    
　　<input type="text" style="width:0;height:0;float:left;visibility:hidden"/>
    <input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
　　<!-- 原先的input -->
　　<input type="text" /> 
　　<input type="password"/>
　　

 

　　（5）增加form。 

　　　　　　此方法可以解决Safari下自动填充的问题，但是在某些高版本Chrome下失效。

<form class="layui-form" style="display:none">  
  <input type="text"/>
  <input type="password"/>  
</form> 

　　　（6）  结合（4）和（5）两种方法

<form class="layui-form" style="display:none">  
  <input type="text"/>
  <input type="password"/>  
</form>  

<form class="layui-form" action="" name="userForm" id="userForm" method="post" onsubmit="return checkInfo();" style="overflow: hidden; margin-left: 18%; ">
    <input type="text" style="width:0;height:0;float:left;visibility:hidden"/>
    <input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
	
  <div class="layui-form-item"style="width: 350px;margin-top: 20px;">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input id="userID" maxlength="10" type="text" name="userID" placeholder="请输入用户名" autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/\s+/g,‘‘)"  >
    </div>
  </div>
<form

　　最后要提一下的就是，如果想要获取input表单里面的值，那么对于增加的form和input不能设置id。

 

 

参考： http://blog.csdn.net/imdennisleung/article/details/51220387