ie8下修改input的type屬性報錯的解決方法
編輯：關於JavaScript
摘要：
現在有一個需求如圖所示，當用戶勾選顯示明文復選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，剛開始想到的就是修改輸入框的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以下兼容性問題。如果你的項目中也有這種交互可以參考下，或者你有更好的方法可以和我一起分享。
小編推薦
JS從數組中隨機取出幾個數組元素的方法
js實現iframe框架取值的方法(兼容IE,firefox,chrome等)
Javascript 去除數組的重復元素
js的form表單提交url傳參數(包含+等特殊字符)的兩種解決方法
node.js中的console.warn方法教程使用說明詳解
淺談js的setInterval事件
javascript 中String.match()與RegExp.exec()的區別說明
JS實現可自定義大小，可雙擊關閉的彈出層效果
詳解JavaScript正則表達式之分組匹配及反向引用
js中document.getElementByid、document.all和document.layers區分介紹
熱門推薦