<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>可显示隐藏密码切换的jQuery插件</title>

<style type="text/css">

*{margin:;padding:;}

body{font:14px Arial, sans-serif;color:#;}

input{font-family:Arial, sans-serif;}

.login{width:270px;margin:40px auto  auto;padding:30px 40px;background-color:#f7f7f7;}

.login ul{list-style-type:none;}

.login li{padding:10px ;overflow:hidden;}

.login .li3, .login .li5{text-align:right;font-size:12px;}

.login .li3 input{width:13px;height:13px;margin: 3px  10px;vertical-align:middle;}

.login .submit{display:block;width:%;padding:6px ;border: none;color:#fff;background-color:#4d90fe;cursor:pointer;}

#email, #password{width:214px;padding:5px;border:1px solid #ccc;}

.forgot{color:#;}

</style>

<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jquery/toggle-password.js"></script>

<script type="text/javascript">

$(function(){

    $('#password').togglePassword({

        el: '#togglePassword'

    });

});

</script>

</head>

<body>

<div class="login">

    <ul>

        <li><span><label for="email">邮箱：</label></span><input id="email" type="text" placeholder="请输入邮箱地址" /></li>

        <li><span><label for="password">密码：</label></span><input id="password" type="password"></li>

        <li class="li3"><input type="checkbox" id="remember"><label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label></li>

        <li class="li4"><input class="submit" type="submit" value="登录"></li>

        <li class="li5"><a class="forgot" href="javascript:">忘记密码？</a></li>

    </ul>

</div>

</body>

</html>

toggle-password.js：

(function ($) {

    $.fn.togglePassword = function( options ) {

        var s = $.extend( $.fn.togglePassword.defaults, options ),

            input = $( this );

        $( s.el ).bind( s.ev, function() {

            var flag = "password" == $( input ).attr( "type" )

            //$(input).removeAttr("type");

            //flag ? $( input ).attr( "type", "text" ) : $( input ).attr( "type", "password" );

            flag ? $(input)[].type = "text" : $(input)[].type = "password";

        });

    };

    $.fn.togglePassword.defaults = {

        ev: "click"

    };

}(jQuery));

　　注意：input的type属性无法修改和移除，要修改其属性，需要这样：$(input)[0].type = "text"

　　效果图：

　　总结：1、修改type值得方式：$("input")[0].type = "text"，这样修改才行

　　　 　　2、 组件封装的思想：（1）函数立即执行：(function($){  //do something  }(jQuery));（2）声明定义默认的default对象；（3）$.extend(default, options);完成自定义参数和方法的拓展。

JS组件系列——显示隐藏密码切换的jQuery插件的更多相关文章

  1. input 显示/隐藏密码

    js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...

  2. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  4. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  6. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  7. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  8. JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

随机推荐

  1. algorithm ch6 priority queque

    堆数据结构的一个重要用处就是:最为高效的优先级队列.优先级队列分为最大优先级队列和最小优先级队列,其中最大优先级队列的一个应用实在一台分时计算机上进行作业的调度.当用堆来实现优先级队列时,需要在队中的 ...

  2. easyui获取当前选中的tabs

    $("#" + $("#tabs").find("iframe")[$(".tabs-header ul li").in ...

  3. Django基础之模板

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }} 和 {% %} 变量相关的用{{ }},逻辑相关的用{% %}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成 ...

  4. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  5. 【状压基础题】poj3254 Corn Fields

    题目大意 :农夫约翰有n*m块地,其中一些地荒掉了.玉米是一种傲娇的植物,种在相邻的地里会导致不孕不育.求所有种法数对100000000求余. 读入:第一行一个n一个m, 接下来是一个n行m列的矩形, ...

  6. DP(悬线法)【P1169】 [ZJOI2007]棋盘制作

    顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述-->p1169 棋盘制作 题目大意 给定一个01棋盘,求其中01交错的最大正方形与矩形. 解题思路: 动态规划---悬线法 以下内 ...

  7. Maven与Nexus OSS

    Maven 是一个项目管理和构建自动化工具,是Apache Fundation下的一个Java项目.常用于Java项目中依赖管理 下载直接去官网 安装Maven 已经编译的二进制包 直接解压到安装目录 ...

  8. 表（Table）

    虽然我们已经将不同用途的物品保存在不同的仓库中了,但是在同一个仓库中数据的保存仍然存在问题.比如食品分为熟食.生肉.大米等,如果把他们随意的堆放在一起,就会造成我们无法很容易的对这些食品进行管理,当要 ...

  9. LoadRunner系列之---web_set_sockets_options，解决No buffer space available错误

    1. 如果在系统运行过程中出现"No buffer space available"或者出现大量连接出现wait的时候, 如何解决? 解决办法: 保证迭代结束后关闭所有的链接: 在 ...

  10. 【推导】Codeforces Round #402 (Div. 2) A. Pupils Redistribution

    一次交换,会让Group A里面的某个数字的数量-1,另一个数字的数量+1:对Group B恰好相反. 于是答案就是xigma(i=1~5,numA[i]-numB[i]>0)(numA[i]- ...