javascript密码框密码的显示与隐藏实例讲解（可应用于一个正反来回变换的事件）

intoSunshine

于 2021-06-29 16:17:39 发布

阅读量342

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/shaochen2015821426/article/details/118336426

版权

本文通过实例讲解了如何使用JavaScript实现密码框的密码显示与隐藏功能，点击眼睛图标可切换显示状态，并同步更新图标状态。主要思路是设置一个标志位进行控制，通过监听事件来实现切换。

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

实例：实现一个密码输入框，输入的密码：显示与隐藏功能

1.0 实现效果：

点击眼睛，实现密码框密码的展示与隐藏，同时切换图片

1.1 主要思路：

设置一个标志位（默认为0，只设置为0或1）
对眼睛图标进行监听，根据标志位的值（0或1）进行不同操作，并注意在最后修改标志位的值
修改标志位的值是为了下次点击实现切换不同的操作

1.2 代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            posit

最低0.47元/天解锁文章

intoSunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript密码框密码的显示与隐藏实例讲解（可应用于一个正反来回变换的事件）

实例：实现一个密码输入框，输入的密码：显示与隐藏功能1.0 实现效果：点击眼睛，实现密码框密码的展示与隐藏，同时切换图片1.1 主要思路：设置一个标志位（默认为0，只设置为0或1）对眼睛图标进行监听，根据标志位的值（0或1）进行不同操作，并注意在最后修改标志位的值修改标志位的值是为了下次点击实现切换不同的操作1.2 代码实现：<!DOCTYPE html><html lang="zh-CN"><head> <meta char.
复制链接

扫一扫