登录时的眼睛

╰+哭是因爲堅強的太久メ 2022-06-03 01:54 151阅读 0赞

在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变input的type类型，具体过程看代码：

<ul class="form-area">
        <li>
            <div class="item-content">
                <div class="item-input">
                    <input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
                </div>
            </div>
        </li>
        <li>
            <div class="item-content">
                <div class="item-input">
                     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
                </div>
            </div>
        </li>
        <li>
            <span style="position:absolute;right: 20px;top: -38px">
                <img id="showText" onclick="hideShowPsw()">
            </span>
        </li>
    </ul>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21

![这里写图片描述][20171205141825411]

![这里写图片描述][20171205141844820]

[20171205141825411]: /images/20220603/6f4a80cabddd4fb6b0f471237a2a3264.png?
[20171205141844820]: /images/20220603/526eeea5124a44458558e55ef4066dbf.png?