网站域名费多少,营销型网站传统网站,网站建设需要的设备和软件,展览展示设计公司排名摘要#xff1a; 现在有一个需求如图所示#xff0c;当用户勾选显示明文复选框时#xff0c;要以明文显示用户输入的密码#xff0c;去掉勾选时要变回密文#xff0c;刚开始想到的就是修改输入框的type来决定显示明文还是密文#xff0c;使用jQuery的attr来做试验#x…摘要 现在有一个需求如图所示当用户勾选显示明文复选框时要以明文显示用户输入的密码去掉勾选时要变回密文刚开始想到的就是修改输入框的type来决定显示明文还是密文使用jQuery的attr来做试验测试结果是chromeFirefoxie9都是好的在ie8以下就会报错查找了下原因ie8中是不允许修改input的type属性最终换了种思路实现。 当勾选显示明文时替换输入框为typetext不勾选时在将输入框替换为typepassword代码如下 1 !DOCTYPE html2 html3 head4 title/title5 meta http-equivContent-Type contenttext/html;charsetutf-86 script srchttp://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js/script7 /head8 body9 span idpassinput namepassword typepassword/spanlabelinput typecheckbox idshow-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 namecname valueval typetext);
18 } else {
19 inp $(#pass).children(input);
20 cname inp.attr(name);
21 val inp.val();
22 $(#pass).html(input namecname valueval typepassword);
23 }
24 });
25 /script
26 /body
27 /html 总结 这篇文章并没有什么技术含量但是这种交互还是存在的写这篇文章主要还是考虑到ie8以下兼容性问题。如果你的项目中也有这种交互可以参考下或者你有更好的方法可以和我一起分享。
