JS实现密码框的显示密码和隐藏密码简单功能

1.准备素材
打开网页：https://www.iconfont.cn/ 阿里巴巴矢量库

找到两个素材，下载即可

2.代码部分

<style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}
</style><body><div class="box"><input type="password" id="input"><img src="../img/close.png" id="eye"></div><script>// 1.获取元素var input = document.getElementById('input');var eye = document.getElementById('eye');var flag = 0;// 2.注册事件 处理程序eye.onclick = function () {// 应用flag 可以实现循环点击if (flag === 0) {// 点击一次后 flag 一定要变化input.type = 'password';// 修改 -图片路径eye.src = "../img/close.png";flag = 1;//赋值操作} else{input.type = 'text';// 修改 -图片路径eye.src = "../img/open.png";flag = 0;}}</script>

3.效果

JS实现密码框的显示密码和隐藏密码简单功能相关推荐

Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
Computer：成功教你如何使用一招—就能找回以前的密码(曾经保存的密码但当前显示为******号的密码)
Computer:成功教你如何使用一招-吊炸天-就能找回以前的密码(曾经保存的密码但当前显示为******号的密码)-建议收藏目录解决问题解决思路解决方法解决问题很久之前保存的密码,目前显 ...
html密码框不显示,密码框中密码的显示与隐藏切换(JS)
目标: 点击小眼睛后, 1.密码框变成文本框: 2.小眼睛图片由闭眼变成睁眼: 3.再次点击后,又变成闭眼+密码框要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为 ...
input密码框获取焦点，不出现账号密码下拉列表
最近有一个项目表单中有密码框,但是在浏览器上获取input焦点后就会出现之前记住的账号密码信息,产品要求不需要显示这个下拉框. 翻阅了大量的资料并没有好的解决方案: 比较详细的参考链接:https:/ ...
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中(D ...
android密码框右侧显示小眼睛
不知道为什么android 资料好少啊,一艘都2012-2015年的居多....这是为什么呢? 实现效果 <?xml version="1.0" encoding=" ...
点击小眼睛完成密码框的显示与隐藏睁眼和闭眼
//当我点击小眼睛时private void eye() {img_login_eye.setOnClickListener( new View.OnClickListener() {@Overrid ...
Android中显示输入的隐藏密码/Android多语系支持
1.我们常常会看到我们输入的密码都是以小黑点的形式出现,这在Android中实现是很简单的,只需要设置一个属性即可. 需要设置EditText的inputType属性,设置如下: android:in ...
java编写脚本校验修改密码_java编写一个更改密码校验程序，有两个密码框，一个用于输入新密码，另一个请输入确认密码……...
展开全部 import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JBu ...

JS实现密码框的显示密码和隐藏密码简单功能

JS实现密码框的显示密码和隐藏密码简单功能相关推荐

最新文章

热门文章