本文摘自PHP中文网,作者藏色散人,侵删。
html实现密码隐藏显示的方法:首先写好HTML界面标签以及css样式;然后直接修改“type=text”和“type=password”来显示和隐藏密码输入框即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
html怎么实现密码隐藏显示?
HTML5表单中password输入框的文字显示与隐藏实现
问题描述与思路
HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容,但有时候会用到允许用户自由显示或者隐藏输入框内容:要实现这个功能首先想到的是用js动态改变input的type类型,即将type = password变成type = text隐藏的密码就会显示,但是实际上却实现不了,没有效果,所以,只能换一个思路:
[更新:最新的type设置已经奏效了,可以直接修改type=text和type=password来显示和隐藏密码输入框了,更新后的代码见下方,原方法请弃用]
放两个input,一个是password,一个是text,共同监听用户的输入事件,用户每次切换我们用js控制两个input的显示与隐藏来实现此效果。
实现步骤:
首先写好HTML界面标签以及css样式(其中的text的input开始先隐藏:style="display:none",后面显示和隐藏操作也通过改变display的属性来实现)
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <style type= "text/css" >
body{
margin:0px;
background-color: white;
font-family: 'PT Sans' , Helvetica, Arial, sans-serif;
text-align: center;
color: #A6A6A6;
}
input{
width: 100%;
height: 50px;
border:none;
padding-left:3px;
font-size: 18px;
}
input:focus {
outline: none;
}
img{
width: 40px;
height: 25px;
position: absolute;
right: 0px;
margin: 15px;
}
button{
width: 200px;
height: 50px;
margin-top: 25px;
background: #1E90FF;
border-radius: 10px;
border:none;
font-size: 18px;
font-weight: 700;
color: #fff;
}
button:hover {
background: #79A84B;
outline: 0;
}
.input_block {
border-bottom: 1px solid rgba(0,0,0,.1);
}
#page_container{
margin: 50px;
}
</style>
|
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id= "page_container" >
<!--暗文密码输入框-->
<div class = "input_block" id= "psw_invisible" >
<img id= "visible" οnclick= "showPsw()" src= "visible.png" >
<input type= "password" id= "input_invisible" placeholder= "Password" />
</div>
<!--明文密码输入框-->
<div class = "input_block" id= "psw_visible" style= "display: none;" >
<img id= "invisible" οnclick= "hidePsw()" src= "invisible.png" >
<input type= "text" id= "input_visible" placeholder= "Password" />
</div>
<button οnclick= "" >Login</button>
</div>
|
然后要用JS实现点击事件的交替操作:开始密码是隐藏的,点击后面的小眼睛图标显示密码,也就是把password的input隐藏然后把text的input显示出来,同时注意要把password的值传到text里面去,反过来一个道理:
阅读剩余部分
相关阅读 >>
Html文件的中文乱码问题与在浏览器中的显示问题
Html怎么设置编码utf8
前端javascript写excel的代码示例
如何在Html中插入视频
怎么用div布局?
如何用Html标记语言编写一个简单的网页
Html怎样格式化输出json数据
Html script标签怎么用
Html如何设置文本框对齐
Html font标签怎么设置字体样式?利用css控制文字大小的方法
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html怎么实现密码隐藏显示