在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. MySQL 行转列 -》动态行转列 -》动态行转列带计算

    Pivot Table Using MySQL - A Complete Guide | WebDevZoomhttp://webdevzoom.com/pivot-table-using-mysql ...

  2. Apache Rewrite 静态配置

    1.mod_rewrite 简介和配置 Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等如一个普通访问 ...

  3. Python写入csv文件示例

    import csv header = ['City', 'AQI', 'PM2.5/1h', 'PM10/1h', 'CO/1h', 'NO2/1h', 'O3/1h', 'O3/8h', 'SO2 ...

  4. Python适配器模式代码

    Python设计模式之适配器模式,代码,思考等 # -*- coding: utf-8 -*- # author:baoshan class Computer: def __init__(self, ...

  5. jenkins结合supervisor进行python程序发布后的自动重启

    jenkins结合supervisor进行python程序发布后的自动重启 项目背景: 通过jenkins发布kvaccount.chinasoft.com站点的python服务端程序,业务部门同事需 ...

  6. jenkins--master/slave模式---master是容器版---slave是非容器版

    实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.tomcat 192.168.0.98 harbor.docker集群.git.jdk.maven 1.先 ...

  7. 16点睛Spring4.1-TaskScheduler

    转发:https://www.iteye.com/blog/wiselyman-2213049 16.1 TaskScheduler 提供对计划任务提供支持; 使用@EnableScheduling开 ...

  8. 使用jmeter HTTP代理服务器录制APP脚本

    使用jmeter HTTP代理服务器录制APP脚本 步骤一.jemter设置 1.启动JMeter,双击运行jmeter.bat,启动jmeter jmeter运行主界面 2.添加线程组:右键测试计划 ...

  9. linux中安装软件的方法

    1. apt-get 安装方法ubuntu 世界有许多软件源,在系统安装篇已经介绍过如何添加源, apt-get 的基本软件安装命令是: sudo apt-get install 软件名 2. 编译安 ...

  10. [CF1051F]The Shortest Statement_堆优化dij_最短路树_倍增lca

    The Shortest Statement 题目链接:https://codeforces.com/contest/1051/problem/F 数据范围:略. 题解: 关于这个题,有一个重要的性质 ...