本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下
直接贴上代码
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>密码输入demo
& lt;/head>
& lt;风格类型=" text/css "比;
身体{
保证金:0 px;
背景颜色:白色;
Helvetica字体类型:“PT无”,Arial,无衬线;
text-align:中心;
颜色:# A6A6A6;
}/*输入框样式,去掉背景阴影模仿原生应用的输入框*/输入{
宽度:100%;
高度:50 px;
边界:没有;
padding-left: 3 px;
字体大小:18 px;
}
输入:{焦点
大纲:没有;
}/*显示\隐藏密码图片*/img {
宽度:40像素;
高度:25 px;
位置:绝对的;
右:0 px;
保证金:15 px;
}/*登录按钮*/按钮{
宽度:200 px;
高度:50 px;
margin-top: 25 px;
背景:# 1 e90ff;
border - radius: 10 px;
边界:没有;
字体大小:18 px;
粗细:700;
颜色:# fff;
}
按钮:{徘徊
背景:# 79 a84b;
大纲:0;
}/*输入框底部半透明横线*/.input_block {
边界底部:1 px固体rgba (0, 0, 0, 1。);
}/* */容器
# page_container {
保证金:50 px;
}
& lt;/style>
& lt; body>
& lt; div id=皃age_container”比;
& lt; !——密码输入框——比;
& lt; div类=癷nput_block”比;
& lt; img id=" demo_img " src=" https://www.yisu.com/zixun/visible.png "比;
& lt;输入类型="密码" id=癲emo_input”占位符="密码"/比;
& lt;/div>
& lt; button> Login
& lt;/div>
& lt;脚本type=" text/javascript祝辞//这里使用最原始的js语法实现,可对应换成jquery语法进行逻辑控制
var demoImg=. getelementbyid (“demo_img”);
var demoInput=. getelementbyid (“demo_input”);//隐藏文本块,显示密码块
函数hideShowPsw () {
如果(demoInput。类型==懊苈搿?{
demoInput。类型=拔谋尽?
demo_img。src=" https://www.yisu.com/zixun/invisible.png ";
其他}{
demoInput。类型=懊苈搿?
demo_img。src=" https://www.yisu.com/zixun/visible.png ";
}
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
附上图片:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
