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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
php学习之流程控制实现代码
2011/06/09 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python中redis的安装和使用
2016/12/04 Python
Python学习入门之区块链详解
2017/07/25 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Django实现基于类的分页功能
2019/10/31 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
《风娃娃》教学反思
2014/04/19 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
国庆节慰问信
2015/02/15 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python