這段時間在修改bugs,突然領導提了一個bug在360下,瀏覽器會自動反顯用戶名和密碼。其實在登錄頁面下這個也無所謂,關鍵是在註冊頁面也會反顯,本來也無所謂,但是返現的地方太噁心了,被領導狠批了一頓。
領導問是怎麼回事,我測了下說是360瀏覽器本身的問題。領導當時就怒了,說了句你代碼就不能屏蔽該功能嗎。痛定思痛,在網上找了些資料,自己嘗試下,解決了。好了廢話少說,解決方式如下:
<script type="text/javascript">
$("#passwordFalse").focus(function(){
$(this).hide();
$("#password").val("").show().css("backgroundColor","red").focus();
});
$("#password").blur(function(){
$(this).show().css("backgroundColor","red");
$("#passwordFalse").hide();
});
$(this).hide();
$("#password").val("").show().css("backgroundColor","red").focus();
});
$("#password").blur(function(){
$(this).show().css("backgroundColor","red");
$("#passwordFalse").hide();
});
</script>
<div class="controls">
<input id="passwordFalse" type="text" class="form-control" placeholder="請 輸入您 的密碼" />
<input id="passwordFalseAgain" type="text" style="display: none" class="form-control" placeholder="請輸入您的密碼" />
<input id="password" name="password" type="password" style="display: none" pla ceholder="請輸入您的密碼" plugin="passwordStrength" class="form-control" d atatype="password" nullmsg="密碼不能爲空!" autocomplete="off" errormsg=" 密碼範圍在6~20位之間!"/>
<span style="display: none;" class="passwordStrength"><b> &nbs p;密碼強度:</b><span class="">弱</span><span class="">中</span><span class="">強</span></span>
<span id="newPwdMsg" style="display: none; margin-top: 20; " class="Validform_checktip Validform_wrong"></span>
</div>
<input id="passwordFalse" type="text" class="form-control" placeholder="請 輸入您 的密碼" />
<input id="passwordFalseAgain" type="text" style="display: none" class="form-control" placeholder="請輸入您的密碼" />
<input id="password" name="password" type="password" style="display: none" pla ceholder="請輸入您的密碼" plugin="passwordStrength" class="form-control" d atatype="password" nullmsg="密碼不能爲空!" autocomplete="off" errormsg=" 密碼範圍在6~20位之間!"/>
<span style="display: none;" class="passwordStrength"><b> &nbs p;密碼強度:</b><span class="">弱</span><span class="">中</span><span class="">強</span></span>
<span id="newPwdMsg" style="display: none; margin-top: 20; " class="Validform_checktip Validform_wrong"></span>
</div>
上面綠色部分是顯示在頁面中的,紅色部分是將反顯的密碼隱藏的關鍵一步,紫色部分是表單中實際要填寫的input。通過上面js代碼將功能實現。把background-color設爲#fff是因爲360會默認給一個屎黃色的背景。分別用一個id爲passwordFalse和passwordFalseAgain的假的輸入框,樣式設爲一樣,當我們點擊假的input的時候,讓真正的顯示出來,同時將反顯的input值填入id爲passwordFalseAgain的輸入框內,設置該輸入框樣式爲style="display: none"。