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

 

<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("");
    })()

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