在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. 100-continue

    https://wiki.open.qq.com/wiki/技术优化原则#1._.E7.A8.8B.E5.BA.8F.E8.AE.BE.E8.AE.A1.E6.97.B6.E9.9C.80.E8.A6 ...

  2. Tosca 添加 modules，添加Library,引用重复步骤

    #增加modules modules模块式基础,好像一切都得从modules开始,想下面这样一个简单的login module就建好了 把这个module login 拖到具体的test case上 ...

  3. hyper-v启动虚拟机时提示“The application encountered an error while attempting to change the state of the machine ‘虚拟机名称'”如何处理?

    1. 找出发生这一问题的事件代号 1.1 在开始菜单中搜索程序Event Viewer并点击进入 1.2 点击路径如下: “Applications and Services Logs > Mi ...

  4. postgre alter命令修改字段

    参考文档:https://www.yiibai.com/postgresql/postgresql_alter_command.html PostgreSQL ALTER TABLE命令用于添加,删除 ...

  5. [转]3D渲染管线

    转自:http://tgerm.org/SRP/ 在3D中有两种渲染管线,分别是图形渲染管线和GPU渲染管线. 图形渲染管线 <Render-Time Rendering Third Editi ...

  6. flutter中的listview的使用

    import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends Statele ...

  7. C#Json数据反序列化为Dictionary并根据关键字获取指定的值

    Json数据: { "dataSet": { "header": { ", "errorInfo": "HTTP请求错误 ...

  8. 如何查看crontab定时任务是否执行过 查看记录

    命令的模式像下面这个: grep "script.php" /path/file.ext. 比如,下面的命令就是从/var/log/cron.log 检测cron任务是否有执行 c ...

  9. UCOS III的时间片轮转调度的一个问题

    1. 如果当前一个任务A在时间片未到来之前,主动放弃剩下的时间片,进入下一个任务B,那么下一个任务的的执行时间是多久? 书上说,是重置时间片,也就是说任务B也运行一个完整的时间片.

  10. STM32驱动模数转换芯片ADS1120（PT100铂电阻测温度）第2篇

    1. 先看下原理图,原理图是电流从IDAC1流出,提供驱动,然后R(REF)这个电阻上的电压作为参考,读取AIN0和AIN1的电压,那么可以测量出来电阻值. 2. 上图是官方给出的参考,下图是我实际用 ...