当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Zepto实现密码的隐藏/显示

Zepto实现密码的隐藏/显示

2019年06月07日  | 移动技术网IT编程  | 我要评论
效果图: 代码如下: <!doctype html> <html lang="en"> <head> <me

效果图:

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持移动技术网!

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网