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>

以上是 Zepto实现密码的隐藏/显示 的全部内容, 来源链接: utcz.com/z/344811.html

回到顶部