让浏览器不记住表单元素输入过的内容

 

<div id="login"> <form id="login-form" method="post" class="form-horizontal" action="/bmpf/home/"> <div id="login-name">保密综合管理系统<div id="logo"><img src="{{STATIC_URL}}img/junhui.png" width="130"></div></div> <div class="form-group" style="position: relative;margin-bottom: 25px;"> <span class="input-group-addon login-icon"> <i class="glyphicon glyphicon-random" aria-hidden="true" style="padding-top: 2px;"></i> </span> <div class="col-lg-12 col-md-12 col-sm-12"> <select class="form-control" id="login-choice" style="background:#f0f0f0"> <option value="kl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名密码</option> <option value="znk">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;USBKEY认证</option> </select> </div> <div id="login-setting"><a href="javascript:void(0)" id="certificate-setting-button">设置</a></div> </div> <input type="text" style="width: 0; height: 0;margin: 0; padding: 0; border: 0; position: absolute; left: 0; top: 0"/> <!--此处是关键--> <div class="form-group login-input-container" id="login-user-name-container"> <span class="input-group-addon login-icon" style="color: #555555;"> <i class="glyphicon glyphicon-user" aria-hidden="true" style="padding-top: 2px;"></i> </span> <div class="col-lg-12 col-md-12 col-sm-12" style="height: 34px;"> <input type="text" class="form-control login-input" id="login-user-name" name="loginUserName" autocomplete="off"/> <div class="login-input-below bg-white" id="login-user-name-tips">用户名</div> </div> </div> <div class="form-group login-input-container" id="login-password-container"> <span class="input-group-addon login-icon" style="color: #555555;"> <i class="glyphicon glyphicon-lock" aria-hidden="true" style="padding-top: 2px;"></i> </span> <div class="col-lg-12 col-md-12 col-sm-12" style="height: 34px;"> <input type="password" class="form-control login-input" id="login-password" name="loginPassword" autocomplete="new-password"/> <div class="login-input-below bg-white" id="login-password-tips">密码</div> </div> </div> <div class="form-group login-input-container" id="login-pin-container"> <span class="input-group-addon login-icon" style="color: #555555;"> <i class="glyphicon glyphicon-lock" aria-hidden="true" style="padding-top: 2px;"></i> </span> <div class="col-lg-12 col-md-12 col-sm-12" style="height: 34px;"> <input type="password" class="form-control login-input" id="login-pin" name="loginPin" autocomplete="new-password"/> <div class="login-input-below bg-white" id="login-pin-tips">PIN</div> </div> </div> <button class="btn btn-success" id="login-submit" type="submit" style="">登&nbsp;&nbsp;&nbsp;&nbsp;录 </button> <div id="copyright"></div> </form> </div>

要点：

1、在所有输入框前添加：

<input type="text" style="width: 0; height: 0;margin: 0; padding: 0; border: 0; position: absolute; left: 0; top: 0"/>

2、文本输入框中添加：

autocomplete="off" 属性

密码框中输入：

autocomplete="new-password" 属性

3、为了兼容FireFox，还必须添加如下代码：

    // 火狐下取消自动填充输入框功能 (function(){ $("#login-user-name").val(""); $("#login-password").val(""); $("#login-pin").val(""); })()

初始化页面的时候将相应的表单元素置空。