input如何显示密码隐藏密码，点击小眼睛显示隐藏密码

呆-码

已于 2023-03-31 18:06:35 修改

阅读量1.1w

点赞数 2

文章标签：前端 html servlet

于 2023-03-31 18:02:37 首次发布

原文链接：https://blog.csdn.net/weixin_60619404/article/details/128352809?spm=1001.2014.3001.5502

版权

本文介绍了如何在HTML中控制密码框显示和隐藏密码。通过改变input标签的type属性，可以实现密码的显示和隐藏。另外，通过添加data属性，可以创建一个可切换的显示/隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、如何单纯的在密码框显示密码

单纯显示密码可以吧type里面的值改成text，如果要隐藏就改成 password。

<input  type="text">

二、如何在密码框里面显示并可以隐藏密码

点击密码框的小眼睛隐藏显示密码：只需添加data="passworedtype"

 <input type="password" name="pwd" data="passworedtype"/>

三、代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>密码的隐藏和显示</title>
</head>
<body>
 <input type="password" name="pwd" data="passworedtype"/>
 
</body>
</html>

四、结果展示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

呆-码

关注关注

2
点赞
踩
7

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue input密码输入框自定义密码眼睛icon

qq_37635012的博客

04-07

872

【代码】Vue input密码输入框自定义密码眼睛icon。

JS实现表单中点击小眼睛显示隐藏密码框中的密码

10-15

主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下

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

input输入款点击小眼睛显示或隐藏密码

04-19

前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。

超简单~新手必会！！ Vue.js中实现登录密码框的“眼睛图标”交互效果

热门推荐

qq_095的博客

10-10

3万+

实现input密码框显示/隐藏的功能 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;

Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）

m0_54883970的博客

03-03

5721

一、知识点：带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。 slot=“suffix” 表示，图标会出现在input 的尾部；二、实现思路要变化的有，图标样式和input的显示方式定义一个flag默认false，绑定input 的type值，flag为true时，type为 text 类型（可以

自定义input密码框眼睛显示隐藏（vue3+ts）

m0_69688393的博客

12-09

2305

自定义input密码框眼睛显示隐藏（vue3+ts）

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

react 通过小眼睛 控制密码显示与隐藏

04-11

"react 通过小眼睛 控制密码显示与隐藏"这个功能是常见的一种设计，它允许用户切换密码的可见状态，增强用户体验。本篇文章将深入探讨如何在React应用中实现这一功能，并结合实际代码示例进行详细讲解。首先，我们...

IE内核输入密码时，后边会出现小眼睛提示，解决方案

张大晴的博客

07-23

1496

input::-ms-clear{display:none;} input::-ms-reveal{display:none;}

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

szzlh123456789的博客

04-01

1368

【代码】vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏。

js实现密码输入框点击小眼睛显示或隐藏密码

努力变好

10-17

7311

登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去。（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）

input密码框显示与隐藏

CH_Y的博客

09-13

4907

在uni-app开发过程中，为了实现显示/隐藏密码使用了组建中的input，但是使用uni组件中的input背景不能穿透。所以用原生的input实现了这个功能。

html密码显示与隐藏

06-10

在HTML中，可以使用<input>标签创建密码输入框，并且可以通过设置type属性为"password"来使输入的密码被隐藏。当用户输入密码时，输入框中显示的是圆点或星号等符号，而不是实际的密码字符。例如： ```html <label for="password">密码：</label> <input type="password" id="password" name="password"> ``` 如果想要用户可以通过点击一个按钮或复选框等方式来切换密码的显示和隐藏，可以使用JavaScript来实现。例如： ```html <label for="password">密码：</label> <input type="password" id="password" name="password"> <input type="checkbox" id="show-password-toggle"> <label for="show-password-toggle">显示密码</label> <script> const passwordInput = document.querySelector('#password'); const showPasswordToggle = document.querySelector('#show-password-toggle'); showPasswordToggle.addEventListener('change', () => { if (showPasswordToggle.checked) { passwordInput.type = 'text'; } else { passwordInput.type = 'password'; } }); </script> ``` 这段代码中，我们创建了一个复选框和一个<label>元素来显示"显示密码"的文本。然后，我们使用JavaScript来监听复选框的change事件，当复选框被选中时，将密码输入框的type属性设置为"text"，这样就可以显示密码了；当复选框被取消选中时，将密码输入框的type属性设置为"password"，这样就可以隐藏密码了。