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 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue如何实现验证码输入交互
Dec 07 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
Smarty变量用法详解
2016/05/11 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
scrapy爬虫实例分享
2017/12/28 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
模具数控专业自荐信
2014/01/27 职场文书
表演方阵解说词
2014/02/08 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
2016年会开场白台词
2015/06/01 职场文书
安全生产学习心得体会
2016/01/18 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS