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 相关文章推荐
node.js中的path.resolve方法使用说明
Dec 08 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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 冲泡冲煮
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php中序列化与反序列化详解
2017/02/13 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python简单I/O操作示例
2019/03/18 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
介绍一下sql server的安全性
2014/08/10 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
安全检查验收制度
2014/01/12 职场文书
一年级小学生评语
2014/04/22 职场文书
个人求职信范文
2014/05/24 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
教师三严三实心得体会
2014/10/11 职场文书
紧急迫降观后感
2015/06/15 职场文书