ie8下修改input的type屬性報錯的解決方法
更新時間：2014年09月16日 16:18:29 投稿：whsnow
當(dāng)用戶勾選顯示明文復(fù)選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，問題是ie8中是不允許修改input的type屬性
摘要：
現(xiàn)在有一個需求如圖所示，當(dāng)用戶勾選顯示明文復(fù)選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，剛開始想到的就是修改輸入框的type來決定顯示明文還是密文，使用jQuery的attr來做試驗，測試結(jié)果是chrome，F(xiàn)irefox，ie9+都是好的，在ie8以下就會報錯，查找了下原因，ie8中是不允許修改input的type屬性，最終換了種思路實現(xiàn)。
當(dāng)勾選顯示明文時替換輸入框為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>
總結(jié)：
這篇文章并沒有什么技術(shù)含量，但是這種交互還是存在的，寫這篇文章主要還是考慮到ie8以下兼容性問題。如果你的項目中也有這種交互可以參考下，或者你有更好的方法可以和我一起分享。
相關(guān)文章
elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
jQuery ajax(復(fù)習(xí))—Baidu ajax request分離版
你沒有看錯標(biāo)題，本文的確是在講Baidu ajax，不過是很久很久以前的版本了,我們先分析一段簡單的ajax代碼，來自早期的百度七巧板項目通過這個來先復(fù)習(xí)一遍ajax的知識
2013-01-01 
這篇文章主要為大家介紹了javascript解鎖前端密碼框常見功能做法示例演示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-03-03 
這篇文章主要介紹了用webpack4開發(fā)小程序的實現(xiàn)方法，分享通過webpack來構(gòu)建小程序的開發(fā)架構(gòu)，感興趣的小伙伴們可以參考一下
2019-06-06 
這篇文章主要介紹了JavaScript運動減速效果,模擬了物體做減速運動的效果,以兩個實例形式分析了javascript實現(xiàn)物體做減速運動的實現(xiàn)技巧,涉及javascript動態(tài)操作頁面元素樣式及數(shù)學(xué)運算的方法,非常簡潔實用,需要的朋友可以參考下
2015-08-08 
JavaScript實現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗,發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實現(xiàn)步驟吧
2024-02-02 
這篇文章主要介紹了深入淺出es6模板字符串,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08 
window.open關(guān)于瀏覽器攔截問題分析及解決方法
window.open是javascript函數(shù)，該函數(shù)的作用是打開一個新窗口或這改變原來的窗口,如果你直接在js中調(diào)用window.open()函數(shù)去打開一個新窗口，瀏覽器會攔截你,那么如何避免呢，感興趣的朋友可以了解下本文或許對你學(xué)習(xí)有所幫助
2013-02-02 
這篇文章主要介紹了window.open()的使用及瀏覽器兼容性問題方面的知識，感興趣的朋友可以參考下
2014-05-05