在Html页面上实现密码可见不可见，使用的阿里巴巴矢量图标库。

html部分：

<!doctype html>

<html>

    <head>

    <meta charset="utf-8">

    <title>网页制作</title>

        <link rel="stylesheet" type="text/css" href="style.css">

        <script src="js/jquery-1.9.1.min.js"></script>

        <script src="js/home.js"></script>

    </head>

    <body style="background-color:#fff;">

        <div class="password-wrap">

           <div class="password-input">

              <input type="password" name="key" value='123456' class="bui-input" autocomplete="off" />

            </div>

            <i class="bt-showpwd off"></i>

        </div>

    </body>

</html>

Css部分：

@font-face {

    font-family: 'iconfont';  /* project id 674189 */

    src: url('iconfont/font_674189_dvawifegwrj.eot');

    src: url('iconfont/font_674189_dvawifegwrj.eot?#iefix') format('embedded-opentype'),

    url('iconfont/font_674189_dvawifegwrj.woff') format('woff'),

    url('iconfont/font_674189_dvawifegwrj.ttf') format('truetype'),

    url('iconfont/font_674189_dvawifegwrj.svg#iconfont') format('svg');

}

input::-ms-clear {display:none;}

input::-ms-reveal {display:none;}

.iconfont {

    display: inline-block;

    font-family: 'iconfont';

    font-style: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    -webkit-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0);

    -webkit-text-stroke-width: 0.2px;

}

.bui-input {

    box-sizing: border-box;

    height: 40px;

    padding: 8px 10px;

    line-height: 24px;

    border: 1px solid #DDDDDD;

    color: #5F5F5F;

    font-size: 14px;

    vertical-align: middle;

    border-radius: 4px;

    width: 330px;

}

.bui-input:hover{

    border: 1px #659aea solid;

}

.bui-input:focus {

    outline: none;

    border: 1px solid #4F9FE9;

    box-shadow: 0 0 3px 0 #2171BB;

    color: #595959;

}

.password-wrap { position: relative; width: 330px; }

.password-wrap .bt-showpwd { color: #999999; position: absolute; top: 8px; right: 10px; line-height: 24px; width: 24px; height: 24px;    text-align: center; cursor: pointer; }

.password-wrap .bt-showpwd.off::before { content: "\e60a"; font-family: "iconfont"; font-size: 18px; }

.password-wrap .bt-showpwd.on::before { content: "\e60b"; font-family: "iconfont"; font-size: 18px; }

效果如下：

JQuery实现密码可见不可见的更多相关文章

  1. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  2. jquery实现密码强度检测

    jquery实现密码强度验证   jquery实现密码强度验证 JS代码:   $('#pass').keyup(function(e) { var strongRegex = new RegExp( ...

  3. (进阶篇)PHP+Mysql+jQuery找回密码

    通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密 ...

  4. jquery记住密码，记住账号，自动登录

    1.引入jquery库 2.引入jquery.cookie.js库 3.引入操作js jsp如下: $(document).ready(function() { //输入框获得焦点-失去焦点 $(&q ...

  5. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...

  6. jquery判断密码是否一致?

    密码 请输入密码 重新输入密码 请输入新密码 <input type="text" id="btn0"> 密码 <span class=&qu ...

  7. PHP+Mysql+jQuery找回密码

    通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密 ...

  8. Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】

    <html> <head>  <script type="text/JavaScript"  src="jQuery-1.5.1.min.j ...

  9. JQuery实现密码有短暂的显示过程和实现 input hint效果

    目录: 一.实现目的 二.问题思考 三.解决办法 1.输入用户名 2.输入密码短暂显示 一.实现目的 这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程,如下图: 二.问题思 ...

随机推荐

  1. 用google translate大文件

    问题: google translate对于大文件不支持,咋办? 思路:自己写个函数把的文件拆成小文件,再用google translate! code: from googletrans impor ...

  2. c语言字符串分割函数（转）

    源:C语言实现split以某个字符分割一个字符串 void split(char *src, const char *separator, char **dest, int *num) { /* sr ...

  3. PHP 二维数组去重（保留各个键值的同时去除重复的项）

    对于如下二维数组,要求对其进行去重: $arr = array( '=>array( 'name'=>'james', , ), '=>array( 'name'=>'susu ...

  4. 算法习题---5-1代码对齐（UVa1593）

    一:题目 将不规范的若干行代码进行对齐.对齐按照最长字符串进行操作.见样例输入 (一)样例输入 ␣␣start:␣␣integer;␣␣␣␣//␣begins␣here stop:␣integer;␣ ...

  5. python学习：几种采用的功能实现示例

    1.python 程序退出的几种方式 import sys sys.exit() sys.exit(0) sys.exit(1) 或者 os._exit() 该方法中包含一个参数status,默认为0 ...

  6. bladex之nacos配置

    blade.yaml #服务器配置server:  undertow:    # 设置IO线程数, 它主要执行非阻塞的任务,它们会负责多个连接, 默认设置每个CPU核心一个线程    io-threa ...

  7. Python使用numpy实现BP神经网络

    Python使用numpy实现BP神经网络 本文完全利用numpy实现一个简单的BP神经网络,由于是做regression而不是classification,因此在这里输出层选取的激励函数就是f(x) ...

  8. LeetCode_401. Binary Watch

    401. Binary Watch Easy A binary watch has 4 LEDs on the top which represent the hours (0-11), and th ...

  9. MVC ViewBag和ViewData的使用

    ViewBag public ActionResult About() { ViewBag.Message = "Your application description page.&quo ...

  10. 关于PF_INET和AF_INET的区别

    在写网络程序的时候,建立TCP socket:   sock = socket(PF_INET, SOCK_STREAM, 0);然后在绑定本地地址或连接远程地址时需要初始化sockaddr_in结构 ...