摘要:
現在有一個需求如圖所示,當用戶勾選顯示明文複選框時,要以明文顯示用戶輸入的密碼,去掉勾選時要變回密文,剛開始想到的就是修改輸入框的type來決定顯示明文還是密文,使用jQuery的attr來做試驗,測試結果是chrome,Firefox,ie9+都是好的,在ie8以下就會報錯,查找了下原因,ie8中是不允許修改input的type屬性,最終換了種思路實現。
當勾選顯示明文時替換輸入框為type="text",不勾選時在將輸入框替換為type="password",代碼如下:
<!DOCTYPE html><html><head><title></title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script src="jquery.min.js"></script></head><body><span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">顯示明文</label><script>$('#show-password').click(function() {var inp,cname,val;if(this.checked) {inp = $('#pass').children('input');cname = inp.attr('name');val = inp.val();$('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">');} else {inp = $('#pass').children('input');cname = inp.attr('name');val = inp.val();$('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">');}});</script></body></html>總結:
這篇文章並沒有什麼技術含量,但是這種交互還是存在的,寫這篇文章主要還是考慮到ie8以下兼容性問題。如果你的項目中也有這種交互可以參考下,或者你有更好的方法可以和我一起分享。