JS实现密码框小眼睛的显示与隐藏(使用字体图标)

前端学习路上的小练习，如若不喜，请勿喷。
眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9C%BC%E7%9D%9B&page=2

代码实现

字体图标的引用，麻烦自学我就不多概述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="../.././font/font_2099015_z5uhbhlgbqn/iconfont.css"><style>.box {position: relative;width: 300px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 230px;height: 30px;border: 0;outline: none;}.box span {position: absolute;top: 6px;right: 1px;width: 20px;}</style>
</head>
<body>
<div class="box"><lable for=""><span class="iconfont icon-yanjing-bi" name="eye" id="eye"></span></lable><input type="password" name="pwd" id="pwd">
</div>
<script>var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');var flag=0;    // 设置变量记录变换状态 1 为文本框   0 为密码框eye.onclick = function() {if(flag==0) {pwd.type = 'text';eye.className = 'iconfont icon-yanjing';    // className 引用字体图标  *关键flag=1;}else {pwd.type = 'password';eye.className = 'iconfont icon-yanjing-bi';flag=0;}}</script>
</body>
</html>

刚开始学习前端，小菜鸟，希望能帮到大家。

JS实现密码框小眼睛的显示与隐藏(使用字体图标)相关推荐

点击密码框显示密码（点击密码框小眼睛可显示输入密码）
案例分析` 登录注册页面中,当我们输入密码时,密码显示的是不可见的,是属于密码框类型,点击小眼睛之后显示密码. **核心思路:**1.点击眼睛按钮,把不可见的密码框类型改成可见的文本框就可看见里面的密 ...
在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
浏览器兼容：在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
一.知识点: 带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标. 因为图标涉及点击 ...
解决IE 自带的密码框小眼睛与输入框X符号
input::-ms-clear{display:none;}/*删除文本框中的叉号*/ input::-ms-reveal{display:none;} /*删除密码框中的小眼睛*/ 注:使用inp ...
vue 和 uniapp 的密码框小眼睛（通用）
密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type 步骤2在data里声明 Data(){ Return{ seen:'', pwdType: 'password', // ...
实现密码框小眼睛效果
点击眼睛显示密码,再次点击图标隐藏密码,需要变化的图标样式和input的显示方式. 效果: 代码: <!DOCTYPE html> <html><head>< ...
Android-EditText实现小眼睛按钮显示密码
Android-EditText实现小眼睛按钮显示密码 1.密码框如何实现在进行安卓开发时,需要获取用户输入内容我们通常需要使用EditText组件获取用户输入.在获取密码等敏感信息时就要对输入内容 ...
js在input框获取焦点展开，失去焦点隐藏案例
js在input框获取焦点展开,失去焦点隐藏,点击内层固定,点击外层收缩事件案例: <!DOCTYPE html> <html> <head><title&g ...

JS实现密码框小眼睛的显示与隐藏(使用字体图标)

JS实现密码框小眼睛的显示与隐藏(使用字体图标)

代码实现

JS实现密码框小眼睛的显示与隐藏(使用字体图标)相关推荐

最新文章

热门文章