Zepto实现密码的隐藏/显示


Posted in Javascript onApril 07, 2017

效果图:

Zepto实现密码的隐藏/显示

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://www.xipwang.cn/js/zepto.min.js"></script>
</head>
<body>
<div class="ui-password">
 <input type="password" name="" class="passwords">
 <button class="seepassword" >查看密码</button>
</div>
<script type="text/javascript">
 $(function(){
 (function(){
 $.fn.showpassWord = function () { //查看密码
 function Seepasswrod(elemnts) {
 this.elemnts = elemnts;
 this.init();
 };
 Seepasswrod.prototype = {
 init: function () {
 var m = this
 this.shouEvent(m);
 },
 shouEvent: function (m) {  
 m.elemnts.on("tap click", function () {
 var type = m.elemnts.parent().find(".passwords").attr("type");
 if (type == "password") {
  m.elemnts.parent().find(".passwords").attr("type", "text");
 } else if (type == "text") {
  m.elemnts.parent().find(".passwords").attr("type", "password");
 }
 });
 },
 };
 return this.each(function () {
 new Seepasswrod($(this))
 });
 };
 })(Zepto);
 $(".seepassword").showpassWord();
 });
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
You might like
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php 发送带附件邮件示例
2014/01/23 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
继续学习javascript闭包
2015/12/03 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python实现excel转sqlite的方法
2017/07/17 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
django 模型字段设置默认值代码
2020/07/15 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
自荐信的基本格式
2014/02/22 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
教师求职自荐信
2014/03/09 职场文书
全陪导游词
2015/02/04 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers