<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"> 用户名密码</option>
<option value="znk"> 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="">登 录 </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("");
})()
初始化页面的时候将相应的表单元素置空。