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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
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
德生PL330测评
2021/03/02 无线电
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
JavaScript 学习技巧
2010/02/17 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python使用递归解决全排列数字示例
2014/02/11 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
个人贷款承诺书
2014/03/28 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
运动会闭幕词
2015/01/28 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python