ie8下修改input的type属性报错
生活随笔
收集整理的這篇文章主要介紹了
ie8下修改input的type属性报错
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
摘要：
現在有一個需求如圖所示，當用戶勾選顯示明文復選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，剛開始想到的就是修改輸入框的type來決定顯示明文還是密文，使用jQuery的attr來做試驗，測試結果是chrome，Firefox，ie9+都是好的，在ie8以下就會報錯，查找了下原因，ie8中是不允許修改input的type屬性，最終換了種思路實現。
當勾選顯示明文時替換輸入框為type="text"，不勾選時在將輸入框替換為type="password"，代碼如下：
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 7 </head> 8 <body> 9 <span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">顯示明文</label> 10 <script> 11 $('#show-password').click(function() { 12 var inp,cname,val; 13 if(this.checked) { 14 inp = $('#pass').children('input'); 15 cname = inp.attr('name'); 16 val = inp.val(); 17 $('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">'); 18 } else { 19 inp = $('#pass').children('input'); 20 cname = inp.attr('name'); 21 val = inp.val(); 22 $('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">'); 23 } 24 }); 25 </script> 26 </body> 27 </html>?總結：
這篇文章并沒有什么技術含量，但是這種交互還是存在的，寫這篇文章主要還是考慮到ie8以下兼容性問題。如果你的項目中也有這種交互可以參考下，或者你有更好的方法可以和我一起分享。
總結
以上是生活随笔為你收集整理的ie8下修改input的type属性报错的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SEO原创文章制作器
- 下一篇： 2022数学建模“五一杯”B题 题解+论