ie8下修改input的type屬性報(bào)錯(cuò)的解決方法
摘要：
現(xiàn)在有一個(gè)需求如圖所示，當(dāng)用戶勾選顯示明文復(fù)選框時(shí)，要以明文顯示用戶輸入的密碼，去掉勾選時(shí)要變回密文，剛開(kāi)始想到的就是修改輸入框的type來(lái)決定顯示明文還是密文，使用jQuery的attr來(lái)做試驗(yàn)，測(cè)試結(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é)：
這篇文章并沒(méi)有什么技術(shù)含量，但是這種交互還是存在的，寫(xiě)這篇文章主要還是考慮到ie8以下兼容性問(wèn)題。如果你的項(xiàng)目中也有這種交互可以參考下，或者你有更好的方法可以和我一起分享。
相關(guān)文章
elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
jQuery ajax(復(fù)習(xí))—Baidu ajax request分離版
用webpack4開(kāi)發(fā)小程序的實(shí)現(xiàn)方法
JavaScript運(yùn)動(dòng)減速效果實(shí)例分析
JavaScript實(shí)現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
window.open關(guān)于瀏覽器攔截問(wèn)題分析及解決方法
window.open()詳解及瀏覽器兼容性問(wèn)題示例探討