Dom——仿京东显示密码

每天的学习

于 2021-06-10 21:00:50 发布

阅读量787

点赞数 1

文章标签： dom

本文链接：https://blog.youkuaiyun.com/zx2014567296/article/details/117790416

版权

这篇博客介绍了如何使用DOM操作实现类似京东显示密码的功能。点击图标时，密码会从密文切换到明文状态，反之亦然。核心思路涉及监听点击事件，通过JavaScript判断并改变密码输入框的类型来实现显示或隐藏密码的效果。

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

显示密码

效果

整体样式如上图所示。密码框输入密码时是密文状态，（如下图1）当点击右边的闭眼图标，闭眼图标会变为睁眼图标，密码也会变为明文状态。（如下图2）
miwen
mingwen

核心思路

在点击图标时密码框显示隐藏密码，因此需要获取的事件源为图标和密码框；事件类型为点击眼睛图标onclick；点击后if语句判断密码表单的类型，如果是类型type为password则转变为文本text，图标变为睁眼；如果是类型type为text则转变为文本password，图标变为闭眼。

HTML与CSS布局

    <div class="w">
    <h3>京东登录</h3>
    <div class="on">
        <p><input type="text" id="txt" class="text" placeholder="用户名/手机号"></p>
        <p><input type="password" id="psw" placeholder="密码"><span><img src="image/闭眼.png" id="eye"></span><span class="forget"><a href="#">忘记密码</a></span></p>
    </div>

最低0.47元/天解锁文章