JS--input密码框数字显示与隐藏

最新推荐文章于 2024-05-13 17:57:15 发布
最新推荐文章于 2024-05-13 17:57:15 发布
阅读量992 收藏 4
点赞数 2
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52283867/article/details/117914296
版权
前言

这个是js里的一个简单应用，我们只需要搞清楚input标签的属性，详情见下图：
12
与我们这次有关联的是password（这个是隐藏的）和text（这个是显示）

<form action="#">
        <input type="password" placeholder="请输入您的密码">
        <img src="../img/close-eye.png" alt
最低0.47元/天 解锁文章
玩会手机就睡觉
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
input密码可见切换
qq_46015513的博客
02-17 1080
button { background-color: pink; border-radius: 10px; } input { border-radius: 10px; height: 20px; } <input type="password"> <button>显示密码</button&g...
JS实现密码框效果
10-14
主要为大家详细介绍了JS实现密码框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
input的type类型password 密码，jquery点击如何显示密码，查看是否正确
最新发布
qq_39951524的博客
05-13 398
input的type类型password 密码,jquery点击如何显示密码,查看是否正确 要实现点击时显示密码，可以使用jQuery来监听输入框的点击事件，并根据需要切换输入框的类型从而实现密码的显示和隐藏。以下是一个简单的实现示例：
input密码输入框的显示与隐藏
m0_51700376的博客
09-30 2669
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> img { vertical-align:top; width: 25px; } </style> </head> <body> <input type="text" placeholder="账号" /&gt
vue 原生input 密码显示与隐藏
努力搬砖的小码
11-01 1142
vue 原生input 密码显示与隐藏
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
m0_62709532的博客
03-31 7283
【代码】input如何显示密码隐藏密码，点击小眼睛显示隐藏密码。
input密码框显示与隐藏
CH_Y的博客
09-13 4426
在uni-app开发过程中，为了实现显示/隐藏密码使用了组建中的input，但是使用uni组件中的input背景不能穿透。所以用原生的input实现了这个功能。
阻止input弹出历史密码提示
weixin_51679573的博客
02-11 935
阻止input弹出历史密码提示
javascript经典特效---input框的隐藏显示.rar
12-25
综上所述，JavaScript控制input框的隐藏与显示涉及到对DOM元素的操作、事件监听以及CSS样式的应用，这些都是Web开发中的基础技能。通过学习和实践，可以实现丰富的用户交互体验，提高网站的可用性和吸引力。
javascript经典特效---input文字特殊显示.rar
12-25
在JavaScript编程领域中，"input文字特殊显示"是一种常见的用户界面增强技术，它涉及到文本输入框（input元素）的自定义样式和交互效果。在网页设计中，input元素通常是用户与网页进行数据交互的主要方式，比如输入...
输入密码时显示隐藏CSS3特效
04-06
这个特效是利用JavaScript（js）和层叠样式表（CSS3）来实现的一种功能，它允许用户在输入密码时切换显示或隐藏状态，提升用户在输入敏感信息时的安全感和便捷性。 首先，我们来看CSS3在这个特效中的应用。CSS3是...
javascript实现前端input密码输入强度验证
10-15
JavaScript 实现前端输入密码强度验证是一种常见的用户交互设计，它能帮助用户创建更安全的密码。下面我们将详细探讨如何利用JavaScript实现这一功能。 首先，密码强度验证的核心在于使用正则表达式来检查用户输入...
vue支付密码组件实现6位数字支付密码弹窗隐藏
08-10
在Vue.js框架中，开发一个支付密码组件是一个常见的需求，特别是在移动端应用中，为了保证交易安全，用户通常需要输入6位数字的支付密码。本文将详细介绍如何实现这样一个Vue支付密码组件，以及如何确保其在iOS和...
微信小程序input输入框密码的显示与隐藏
aaa123aaasqw的博客
05-12 1206
【代码】微信小程序input输入框密码的显示与隐藏。
使用input type的密码框和文本框的属性，实现密码的显示与隐藏
KB0824liu的博客
04-03 729
【代码】使用input type的密码框和文本框的属性，实现密码的显示与隐藏。
js、jquery分别实现点击密码输入框密码显示和隐藏
热门推荐
陈艾语的博客
06-12 1万+
很多密码框都有个眼睛标记，点击能显示密码。原理就是点击切换password为text等显示
input password显示明文密码
wxl1390的博客
04-09 1139
input type='password' 显示明文密码
input type=password 取消密码提示框
王永存
08-01 4430
浏览器记住密码后，在写页面时，设置了input的type='input'时，会带出密码提示框让你回填（如下图所示），怎么才能取消它呢？ 百度了很多的办法，1、说加一个隐藏的input框（最佳办法）2、加属性 autocomplete=“new-password” 3、通过失去焦点，获取焦点来控制 在谷歌浏览器的试的，没有一个能行的。没有办法，还是靠自己实现吧。 大致思路是这样的，利用input的 readonly结合失焦/焦点/点击等事件进行处理，具体代码如下： <input ty...
运用RegExp对象、Element对象和Attribute对象的相关知识，完成密码框显示与隐藏及登录验证的效果。
06-13
好的，我理解您的问题是希望我提供一个使用RegExp对象、Element对象和Attribute对象的相关知识来实现密码框显示与隐藏及登录验证的示例代码，是这样吗？ 那我就为您提供一个示例代码，代码如下： HTML部分： ``` <form id="login-form"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <i class="show-password" onclick="togglePasswordVisibility(this)"></i> </div> <button type="submit">登录</button> </form> ``` 在上面的代码中，我们使用了一个i元素作为切换密码可见性的按钮，并绑定了togglePasswordVisibility方法。 JavaScript部分： ``` // 切换密码可见性 function togglePasswordVisibility(icon) { var passwordInput = document.getElementById("password"); if (passwordInput.type === "password") { passwordInput.type = "text"; icon.classList.remove("fa-eye"); icon.classList.add("fa-eye-slash"); } else { passwordInput.type = "password"; icon.classList.remove("fa-eye-slash"); icon.classList.add("fa-eye"); } } // 登录验证 document.getElementById("login-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交 var username = this.username.value; var password = this.password.value; var passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; // 密码正则表达式 if (!passwordPattern.test(password)) { alert("密码必须包含至少一个字母和一个数字，且长度不少于8位！"); return; } // 在这里进行登录验证的逻辑 }); ``` 在上面的代码中，我们首先定义了一个togglePasswordVisibility方法，用于切换密码框的可见性。当用户点击密码框右侧的按钮时，我们通过修改密码框的type属性来实现密码框的切换。同时，我们还使用了classList对象来切换按钮上的图标。 接下来，我们使用addEventListener方法为表单绑定了一个submit事件的监听器。在事件处理函数中，我们首先使用this关键字获取了表单元素，然后获取了用户名和密码的值。接着，我们定义了一个正则表达式，用于匹配密码的格式。如果密码不符合格式要求，我们就弹出一个提示框并返回，防止表单继续提交。最后，我们可以在登录验证的逻辑中进行后续处理。 希望这个示例代码可以帮助到您！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值