ie8下修改input的type屬性報(bào)錯(cuò)的解決方法
摘要:
現(xiàn)在有一個(gè)需求如圖所示,當(dāng)用戶勾選顯示明文復(fù)選框時(shí),要以明文顯示用戶輸入的密碼,去掉勾選時(shí)要變回密文,剛開始想到的就是修改輸入框的type來決定顯示明文還是密文,使用jQuery的attr來做試驗(yàn),測試結(jié)果是chrome,F(xiàn)irefox,ie9+都是好的,在ie8以下就會(huì)報(bào)錯(cuò),查找了下原因,ie8中是不允許修改input的type屬性,最終換了種思路實(shí)現(xiàn)。
當(dāng)勾選顯示明文時(shí)替換輸入框?yàn)閠ype="text",不勾選時(shí)在將輸入框替換為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>
總結(jié):
這篇文章并沒有什么技術(shù)含量,但是這種交互還是存在的,寫這篇文章主要還是考慮到ie8以下兼容性問題。如果你的項(xiàng)目中也有這種交互可以參考下,或者你有更好的方法可以和我一起分享。
相關(guān)文章
javascript用正則表達(dá)式過濾空格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨avascript用正則表達(dá)式過濾空格的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06我要點(diǎn)爆”微信小程序云開發(fā)之項(xiàng)目建立與我的頁面功能實(shí)現(xiàn)
這篇文章主要介紹了我要點(diǎn)爆”微信小程序云開發(fā)之項(xiàng)目建立與我的頁面功能實(shí)現(xiàn),本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05Nest.js快速啟動(dòng)API項(xiàng)目過程詳解
這篇文章主要為大家介紹了Nest.js快速啟動(dòng)API項(xiàng)目過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例,需要的朋友可以參考一下2013-04-04javascript遍歷對(duì)象的五種方式實(shí)例代碼
在我們?nèi)粘9ぷ鬟^程中,我們對(duì)于javaScript遍歷對(duì)象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對(duì)象的五種方式,需要的朋友可以參考下2021-10-10