js和jq实现点击小眼睛后密码显示与隐藏切换

效果（要求）

眼睛的图标这里是使用了阿里巴巴图标库的图标。

js实现

<!DOCTYPE html>
<html lang="en"><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>密码框后面的小眼睛</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_3448045_gwooawlcz3s.css">
</head><body><div><input type="text" id="pwd"><i class="iconfont icon-eye-fill" id="eye" onclick="change()"></i></div><script>var pwd = document.getElementById("pwd");var eye = document.getElementById("eye");function change(){if( pwd.type == "text"){pwd.type = "password";eye.class = "iconfont icon-no_eye"}else{pwd.type = "text";eye.class = "iconfont icon-eye-fill"}}</script>
</body></html>

jq实现

<!DOCTYPE html>
<html lang="en"><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>密码框后面的小眼睛</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_3448045_gwooawlcz3s.css"><script src="../js/jquery.min.js"></script>
</head><body><div><input type="text" id="pwd"><i class="iconfont icon-eye-fill" id="eye"></i></div><script>var pwd = $("#pwd");var eye = $("#eye");eye.on('click', function() {if (pwd.attr("type") == "text") {pwd.attr("type", "password");eye.attr("class", "iconfont icon-no_eye");} else {pwd.attr("type", "text");eye.attr("class", "iconfont icon-eye-fill");}})</script>
</body></html>

一个我的疑问——jq入口函数必须要写吗？

在< head> </ head>标签中，jQuery入口函数必须要写，在< body> </ body>可以不写。
写上入口函数后不论放在哪个标签下都能去执行。一般建议在body标签中写入口函数，就是为了等页面加载完成后才执行入口函数。

js和jq实现点击小眼睛后密码显示与隐藏切换相关推荐

点击小眼睛完成密码框的显示与隐藏睁眼和闭眼
//当我点击小眼睛时private void eye() {img_login_eye.setOnClickListener( new View.OnClickListener() {@Overrid ...
在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换
大家自己脑补一下,就是当你输入QQ密码时的一些展示和操作具体看代码,亲测真机模拟有效(具体看GIF) 还有还有,一开始想的用type,但网上都说真机不成功,所以也就不试了,下面这种方法也是借鉴CSD ...
html密码框不显示,密码框中密码的显示与隐藏切换(JS)
目标: 点击小眼睛后, 1.密码框变成文本框: 2.小眼睛图片由闭眼变成睁眼: 3.再次点击后,又变成闭眼+密码框要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为 ...
JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...
密码显示与隐藏效果 html+css+js
先看效果: 前言: 一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~ 实现: 定义html的输入框的标签,kuang为底层盒子,password为输入框,co ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
questasim中点击 add wave 后，显示 no data 解决方法
questasim中点击 add wave 后,显示 no data 解决方法昨天在questasim中编译sv 文件,顺利出波形.没有关闭软件,打算今天接着研究.却发现没有波形了... 重新点击a ...
js实现密码输入框点击小眼睛显示或隐藏密码
登录页密码框加密输入不知道对错,加个小眼睛方便查看和修改,下面是小眼睛效果图,如果不喜欢这个图标可以自己去阿里图标库自己选择下载. html代码(因为只把密码输入框展示出来了,所以样式自行调整,只给你 ...
利用js点击小眼睛图片实现转换明文暗码的效果
明文暗码:实际上就是密码框和文本框的切换. 看到别人输入密码的时候旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了. HTML ...

js和jq实现点击小眼睛后密码显示与隐藏切换

效果（要求）

js实现

jq实现

js和jq实现点击小眼睛后密码显示与隐藏切换相关推荐

最新文章

热门文章