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

最新推荐文章于 2023-06-18 10:28:56 发布
最新推荐文章于 2023-06-18 10:28:56 发布
阅读量873 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44134816/article/details/108778049
版权
这篇博客介绍了如何使用JavaScript来实现密码输入框的显示和隐藏切换功能。通过点击眼睛图标，可以将密码框从明文切换到密文状态，反之亦然，同时更新对应的小图标。该功能常见于登录界面，提高了用户体验。
摘要由CSDN通过智能技术生成

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");
}
},

weixin_44134816
关注
专栏目录
通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果
小杨的博客
07-03 3768
通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果
v-model --双向数据绑定
qq_45802159的博客
01-03 3250
<!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，如有需要同志们可以自行下载直接复制粘贴就行，然后浏览器打开测试。
JavaScript账号密码输入框
最新发布
m0_53162363的博客
06-18 765
【代码】JavaScript账号密码输入框。
js模仿微信密码框
JAVA_Hello Word
12-08 851
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实现密码块的显示与隐藏（按钮）
EEEugene的博客
11-16 1605
最近老师上课有讲到这个问题，写了就顺便就发出来吧 js部分 <script type="text/javascript"> window.onload=function(){ var oPass= document.getElementById('pass'); var oBtn=document.getElementBy...
JS实现密码框的显示密码和隐藏密码功能示例
11-28
总结来说，这个实例展示了如何使用JavaScript动态修改HTML元素属性，以实现显示和隐藏密码的功能。了解这一技术可以帮助开发者创建更加用户友好的登录或注册表单，增强用户体验。然而，在实际开发中，还需结合现代...
js实现密码输入框切换显示和隐藏
05-31
是的，可以使用JavaScript来实现密码输入框的切换显示和隐藏。可以通过改变输入框的type属性值来实现。当type属性的值为“password”时，输入框中输入的内容会被隐藏；当type属性的值为“text”时，输入框中输入的...
原生js实现密码输入框值的显示隐藏
10-19
JavaScript实现显示与隐藏的思路是，当密码处于隐藏状态时（即`type="password"`），我们将其`type`属性修改为`text`，以显示密码内容；当密码处于显示状态时，我们再次将`type`属性修改回`password`以隐藏密码。 ...
css简易的进度条
qq_45723045的博客
10-22 845
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
js实现input密码框显示/隐藏功能
12-04
JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下 实现代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ position: absolute; righ
使用js作html密码弹窗
a13568hki的博客
12-10 2966
1、编写js弹窗 vi index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &...
运用JS实现密码框效果（附源码）
DFireTesting的博客
09-22 1673
前言 最近一直在公司写文档类的工作，挺枯燥的，搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了，所以就重温了一下密码框效果用js实现的方法。记录一下“美好”生活。 源码 附上源码，不够如果不是很熟练的话还是建议大家手打一遍，熟能生巧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
JavaScript 实现密码可见性切换（显示和隐藏）
linxiaoduo的博客
12-28 6013
默认情况下，输入的密码的 input 标签 type="password"，默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果，但是 IE 下就会报错。如果你需要兼容IE，就必须考虑其他方案。 这里有几点需要说明的是： 示例使用了替换整个 input 标签方案，所以...
js、jquery分别实现点击密码输入框密码显示和隐藏
陈艾语的博客
06-12 1万+
很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换password为text等显示
VUE前端实现密码输入的显示和隐藏
wujize的博客
04-16 8866
VUE前端实现密码输入的显示和隐藏 在用户前端登录时，密码输入框右边增加一个“眼睛”图标，实现用户输入密码的是显示星号还是字符，可以方便用户在输入复杂密码是确认，是一个比较符合用户使用习惯的非功能性设计。 一、准备图标 准备两个“眼睛”图标，第一个是闭上的，代表不显示密码，密码输入显示为*。SVG图标如下： <svg width="128" height="64" xmlns="http:...
实现input密码框显示/隐藏的功能
qq_095的博客
10-10 3万+
实现input密码框显示/隐藏的功能 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt;
设置input隐藏并用js控制显示和隐藏
热门推荐
周文超的专栏
10-29 5万+
$("pro").show();
密码框点击切换input类型
zcs123ok的博客
06-27 1068
今天有个需求，就是常见的input框点击后边小眼睛，会显示输入的密码，现在把它单独拿出来，因为懒，所以用”=“来代替小眼睛。css代码部分：   *{ padding: 0; margin: 0; } .div{ border: 1px solid #e4393c; width: 270px; height: 30px; margin: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值