js实现密码输入框点击小眼睛显示或隐藏密码

登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去阿里图标库自己选择下载。

html代码（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）

<div class="login_ipt"><input class="pwd" id="pwd" type="password" placeholder="请输入密码"><img class="eye" id="eye" src="./images/eye.png" alt="">
</div>

js代码

// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function () {// 点击一次之后，flag一定要变化if (flag == 0) {pwd.type = 'text';eye.src = './images/eye_active.png';flag = 1; //赋值操作} else {pwd.type = 'password';eye.src = './images/eye.png';flag = 0;}
}

js实现密码输入框点击小眼睛显示或隐藏密码相关推荐

JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...
js点击小眼睛显示隐藏密码框的密码
该按钮类似于登录页面后面的小眼睛点击显示密码再点击密码变星号核心思路:把密码框类型改为文本框即可看见里面的密码利用flag变量判断flag的值如果是1就切换文本框 flag设置为0 如果是 ...
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
目录一.如何单纯的在密码框显示密码二.如何在密码框里面显示并可以隐藏密码三.代码展示四.结果展示一.如何单纯的在密码框显示密码单纯显示密码可以吧type里面的值改成text,如果要隐藏 ...
input输入密码类型，点击小眼睛显示密码或隐藏功能
一般的登录输入密码类型的,都会用一张图片点击查看密码,我遇到了这样的功能,所以就记下来了. <div class="pwd label"><div class=& ...
uni-app 点击小眼睛显示/隐藏密码
<template><view><form><view class="cu-form-group margin-lg "><i ...
利用js点击小眼睛图片实现转换明文暗码的效果
明文暗码:实际上就是密码框和文本框的切换. 看到别人输入密码的时候旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了. HTML ...
点击小眼睛完成密码框的显示与隐藏睁眼和闭眼
//当我点击小眼睛时private void eye() {img_login_eye.setOnClickListener( new View.OnClickListener() {@Overrid ...
jquery实现点击小图片显示大图片
首先要准备4张小图片和4张大图片,代码如下: <!DOCTYPE html> <html><head lang="en"><meta ch ...
Swing 给密码框JPasswordField设置显示和隐藏密码功能
先上个效果图接下来代码 JPasswordField pwd = new JPasswordField(); pwd.setEchoChar('*');//添加显示密码图标按钮 JButton vi ...

js实现密码输入框点击小眼睛显示或隐藏密码

js实现密码输入框点击小眼睛显示或隐藏密码相关推荐

最新文章

热门文章