html怎么实现密码隐藏显示


本文摘自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的显示与隐藏来实现此效果。

a22aca7e1e3fd6f4e8c7dc5faddd6fa.png

实现步骤:

首先写好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);

}

/*container*/

#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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...