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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
js实现橱窗展示效果
Jan 11 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
Paypal支付不完全指北
Jun 04 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
一个数据采集类
2007/02/14 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
js 窗口抖动示例
2013/09/04 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python之reload流程实例代码解析
2018/01/29 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
linux面试相关问题
2013/04/28 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
岗位说明书标准范本
2014/07/30 职场文书
2014年环卫工作总结
2014/11/22 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
MySQL 服务和数据库管理
2021/11/11 MySQL
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers