讓瀏覽器不記住表單元素輸入過的內容

 

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

初始化頁面的時候將相應的表單元素置空。