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以下就會報(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-05
IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例,需要的朋友可以參考一下2013-04-04

