JS实现密码输入框切换显示和隐藏

最新推荐文章于 2023-11-23 13:04:56 发布
原创 最新推荐文章于 2023-11-23 13:04:56 发布 · 937 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

这篇博客介绍了如何使用JavaScript来实现密码输入框的显示和隐藏切换功能。通过点击眼睛图标，可以将密码框从明文切换到密文状态，反之亦然，同时更新对应的小图标。该功能常见于登录界面，提高了用户体验。

js实现密码输入框切换显示和隐藏

在这里插入图片描述
点击eye图标，实现密码框显示与隐藏切换
open() {
var getPassword = document.getElementById(“password”);
//判断输入框的类型：password或者text
if (getPassword.type == “password”) {
getPassword.type = “text”;
this.pic = require("…/…/assets/login/open_eye.png"); //小图标
} else {
getPassword.type = “password”;
this.pic = require("…/…/assets/login/close_eye.png");
}
},

通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果
小杨的博客
07-03 3906
通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果
VUE(三)•iview页面布局之fooert浮动在底部
Damon Lee的博客
09-04 965
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
js自定义密码输入框弹窗
05-29
js自定义密码输入框弹窗的demo，因项目需要所以编写了这个小demo，如有需要同志们可以自行下载直接复制粘贴就行，然后浏览器打开测试。
v-model --双向数据绑定
qq_45802159的博客
01-03 3439
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript账号密码输入框
m0_53162363的博客
06-18 915
【代码】JavaScript账号密码输入框。
js模仿微信密码框
JAVA_Hello Word
12-08 909
1，首先我们编写html代码（导入jquery，_Loadbox中的两个参数代表从哪个层写入密码框，this则为当前html） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery微信支付代码&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &
JS实现密码框的显示密码和隐藏密码功能示例
11-28
总结来说，这个实例展示了如何使用JavaScript动态修改HTML元素属性，以实现显示和隐藏密码的功能。了解这一技术可以帮助开发者创建更加用户友好的登录或注册表单，增强用户体验。然而，在实际开发中，还需结合现代...
js实现密码输入框切换显示和隐藏
05-31
是的，可以使用JavaScript来实现密码输入框的切换显示和隐藏。可以通过改变输入框的type属性值来实现。当type属性的值为“password”时，输入框中输入的内容会被隐藏；当type属性的值为“text”时，输入框中输入的...
原生js实现密码输入框值的显示隐藏
10-19
JavaScript实现显示与隐藏的思路是，当密码处于隐藏状态时（即`type="password"`），我们将其`type`属性修改为`text`，以显示密码内容；当密码处于显示状态时，我们再次将`type`属性修改回`password`以隐藏密码。 ...
前端js实现密码块的显示与隐藏（按钮）
EEEugene的博客
11-16 1776
最近老师上课有讲到这个问题，写了就顺便就发出来吧 js部分 <script type="text/javascript"> window.onload=function(){ var oPass= document.getElementById('pass'); var oBtn=document.getElementBy...
css简易的进度条
qq_45723045的博客
10-22 963
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
基于JS实现密码框(password)中显示文字提示功能代码
11-22
其实实际上实现中并不能让password中显示文字提示，但是我们在工作中有这样的需求，当没输入东西的时候，框内有提示输入密码，但是当输入东西的时候又显示的是*号，那么是如何实现的呢？其实原理很简单，就是放两个文本框，样式以及定位都是一样的。先将type为password的隐藏，只显示type为text的伪密码框，value设置提示内容例如请输入密码。然后当input触发的时候，type为text的input隐藏，让type为password的input显示出来。然后当检测password的value为空的时候，再将type为password隐藏，type为text的显示。啥话也不说了，上代码。
JavaScript练习——密码框的显示与隐藏
m0_65290003的博客
11-23 2456
1、通过 document.querySelector，选取页面上的输入框元素（input）和标签元素（label）。2、为输入框元素添加两个事件监听器：一个用于处理获取焦点（focus）事件，另一个用于处理失去焦点（blur）事件。当输入框获取焦点时，为标签元素添加 active 类。当输入框失去焦点，并且输入框内没有内容时，移除标签元素的 active 类。3、为密码图标（.mi-password）添加一个点击事件监听器，用于处理点击事件。当密码图标被点击时，检查输入框的类型。
使用js作html密码弹窗
a13568hki的博客
12-10 3255
1、编写js弹窗 vi index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &...
自定义网页密码输入框，以实现禁止浏览器保存密码
qq_36765991的博客
06-04 1343
因为安全问题需要禁止浏览器保存密码，而浏览器是通过input的type='password’识别是否保存密码的，所以只需要将type变成text，然后使用js代码手动实现即可。使用网上的方法基本都失败，所以还是自己实现不偷懒了。
运用JS实现密码框效果（附源码）
DFireTesting的博客
09-22 1780
前言 最近一直在公司写文档类的工作，挺枯燥的，搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了，所以就重温了一下密码框效果用js实现的方法。记录一下“美好”生活。 源码 附上源码，不够如果不是很熟练的话还是建议大家手打一遍，熟能生巧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
JavaScript实现弹窗设置密码
m0_56265442的博客
04-07 2448
<>
javascript制作密码验证框 -- 案例
Messchao的博客
09-29 1060
js制作密码验证框效果图html代码css代码js代码 效果图 html代码 <div> 设置密码: <input type="password" value="" class="ipt"> <p class="message">请输入6-16位密码</p> </div> css代码 <style> div { width: 600px; mar
弹出输入框的js代码
涓涓细流，细水长流
09-24 363
可以定义成文件：Wo_Modal.js Wo_Modal = new Object(); Wo_Modal._variableName = 'Wo_Modal'; Wo_Modal.LoadingHtmlUrl = null; Wo_Modal.WindowCssClasses = new Array(); Wo_Modal.WindowTitleCssClasses = new Arr...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值