JavaScript切换密码可见与不可见

喜火用木

于 2023-01-17 13:36:26 发布

阅读量309

点赞数

分类专栏：前端设计文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_40147237/article/details/128714900

版权

这篇博客介绍如何使用JavaScript在登录界面中实现密码字段的可见与不可见切换功能。通过点击眼睛图标，用户可以控制密码的显示状态。内容包括在CSS、HTML和JavaScript中的关键代码实现。

摘要由CSDN通过智能技术生成

登陆界面的密码栏，通过点击小眼睛图标，实现密码的可见性。
该实例所用到的图片如下：

在style中写入如下代码：

.password {
   
            position: relative;
            width: 100%;
            height: 54px;
            background-image: url(.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

喜火用木

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用 JavaScript 切换密码可见性

我的博客，不一样的自我表达

05-28

155

由于一些基本的 JavaScript 和 CSS，您刚刚学会了如何创建一个功能齐全的“显示密码”表单输入字段。与 w3collective 上的所有教程一样，您可以在GitHub上找到可用的源代码。切换密码的可见性允许用户检查他们是否正确输入了密码。它有助于防止当您认为自己已正确输入密码却发现您没有正确输入密码时感到沮丧。我们可以更进一步，添加一个“眼睛”图标来指示密码的切换状态。接下来添加一个事件侦听器，该侦听器将在单击复选框时click调用一个函数：toggleClicked()

input密码可见切换

qq_46015513的博客

02-17

1157

button { background-color: pink; border-radius: 10px; } input { border-radius: 10px; height: 20px; } <input type="password"> <button>显示密码</button&g...

参与评论您还未登录，请先登录后发表或查看评论

javascript密码可见 -- 案例

Messchao的博客

09-29

320

js点击密码可见 @Draven效果预览html代码css代码js代码效果预览 html代码 <input type="text" placeholder="账号"> <input type="password" placeholder="密码"> <button>点击显示密码</button> css代码无 js代码 <script> //获取密码框 var pas = document.querySelectorAll('inp

密码可见与不可见

gengbaolong的博客

07-30

1931

项目中一个小功能，密码可见与不可见来回切换。效果图：代码： public class PwdActivity extends AppCompatActivity { public static void startActivity(Context context){ Intent intent = new Intent(...

案例： JS实现显示隐藏密码框

m0_61736351的博客

02-06

900

在实现本案例时，要清楚什么时显示隐藏密码框。在我们点击某个图标时，密码框中不可见的密码变为可见的数字，字母和符号的组合。主要算法：设置一个flag变量，当flag = 0 时，显示密码（password）；flag= 1时显示，显示文本（text）。主要思路：点击眼睛按钮，把密码框类型改为文本框可以看见里面代码实现： <style> .box{ position: relative; width: 400

密码的显示与隐藏php,JavaScript如何实现密码可见性切换（显示和隐藏）

weixin_31880471的博客

03-13

663

本篇文章给大家带来的内容是关于JavaScript如何实现密码可见性切换(显示和隐藏)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前端密码可见性切换(显示和隐藏)效果，大家估计都见过，所以就不多说了。默认情况下，输入的密码的 input 标签 type="password"，默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、Fire...

custom-element-password-toggle:component此组件是用纯香草JavaScript编写的自定义元素。它旨在轻松切换密码可见性

05-26

它旨在轻松切换密码可见性。安装该软件包使用新的ES6语法编写。您可以使用将其直接导入浏览器中。 < script defer type =" module " src =" https://unpkg.com/custom-element-password-toggle " > <...

vue实现密码显示隐藏切换功能

08-27

在本文中，我们使用了 JavaScript 代码来实现密码显示隐藏切换功能。JavaScript 代码是 Vue 组件的 Script 部分，它定义了组件的逻辑行为。在本例中，我们使用了 `data` 方法来定义组件的数据，使用了 `methods` ...

JS设置控件条件性可用/可见（参数面板）

王世洪的博客

11-27

1345

在报表的使用过程中，有一种应用场景：在使用者的做查询条件时，根据下拉框或填写的值，自动显示/隐藏下一个筛选框，例如选了省份和城市之后，再显示区县的筛选框，如下图： 1、报表界面设计：其中，“区县”和对应的下拉框，需要预设置为不可见。 2、javascript事件编辑在城市下拉框中，设置“编辑后”事件如下：代码如下： var form = this.options.fo...

JS控制元素可见（显示）与不可见（隐藏）

weixin_34072458的博客

09-06

883

方法一： document.getElementById("id").style.visibility="hidden"; document.getElementById("id").style.visibility="visible"; 该方法实现隐藏后，页面的位置还被控件占用，显示空白。方法二： document.getElementById("id").style.dis...

Jquery和JS设置div是否可见总结

火舞狂沙

07-22

4060

使用原始的JS设置div是否可见

怎么用javaScript写密码框密码可见和不可见的切换效果？

weixin_48047636的博客

03-30

2495

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、密码可见与不可见的切换二、步骤1.html代码2.CSS代码2.CSS代码二、结果总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、密码可见与不可见的切换示例：仿京东密码可见和不可见切换的密码框二、步骤 1.html代码代码如下（示例）：.

js-仿京东显示隐藏密码

qq_41670147的博客

11-21

1153

<!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中设置按钮的可见与不可见

lsc的博客

06-25

1万+

html:<button type="button" id="change_cancel" class="btn btn-default" style="position:relative;left:-50px;opacity:1;">取消</button>js:设置不可见 var change_cancel = document.getElementById

登录密码，眼睛效果，点击显示，点击隐藏

若水印象博客

07-10

9983

$(document).ready(function(){ $(".userinfo_main_csrq i").click(function(){ if ($( this ).siblings("input").attr("type") == "text") { $( this ).siblings("input")[0].type = "passwo

在web前端的js中设置按钮的可见与不可见

xsfqh的专栏

04-29

4905

设置不可见 var change_cancel = document.getElementById("change_cancel"); change_cancel.style.display = "none"; 设置可见 var change_cancel = document.getElementById("change_cancel"); ...

JS设置控件是否可见

阿杰

10-07

1307

前台JS脚本： document.getElementById("lbtnSave").style.display="none";//可见document.getElementById("lbtnSave").style.display = "";//不可见后台CS代码：lbtnSave.Style.Add("display", "");//不可见lbtnSave.Style

android代码密码隐藏,android 显示密码和隐藏密码

weixin_36293915的博客

05-26

1117

最近项目中有这样的一个需求，就是提供给用户显示密码和隐藏密码由于之前没有使用过，遂去寻找方案我们都知道EditText 控件有输入的属性这里设置类型比较多，我们可以选择，基本能满足日常开发使用，特殊需求的输入另说ok，说到这里，我们选择一种password类型:textPassword，默认密码是不可见。接下来就是在代码中实现显示和隐藏密码方案1、设置输入类型if (pwdIsVisible) {...

密码隐藏/显示的简单实现