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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值