在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. Flutter -------- Http库实现网络请求

    第三方库 http实现网络请求,包含get,post http库文档:https://pub.dev/packages/http 1.添加依赖 dependencies: http: ^0.12.0 ...

  2. Java基础 Scanner 使用nextLine接收字符串

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  3. Java基础 do-while 简单示例

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. [译]如何将dataframe的两列结合起来？

    我用pandas生成了一个20 x 4000的dataframe.其中两列名为Year和quarter.我想创建一个名为period的变量,将Year = 2000和quarter = q2变为200 ...

  5. 修改excel图表中的“系列一”

    修改excel图表中的"系列一" 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://zhidao.baidu.com/question/153915 ...

  6. MySql存储过程常用的函数

    字符串类 CHARSET(str) //返回字串字符集CONCAT (string2 [,... ]) //连接字串INSTR (string ,substring ) //返回substring首次 ...

  7. expect 实现自动交互脚本

    1. 说明 在编写脚本时,可能会遇到需要在另一台主机上执行一个命令,或者在本机拷贝另一台主机内的一个文件.如果两台主机之间没有做互信,就会牵扯到用户输入密码的交互过程,这对编写自动脚本来说, 就行不通 ...

  8. LODOP设置打印份数及是否逐份输出

    LODOP中通过SET_PRINT_COPIES可以设置打印份数,例如:LODOP.SET_PRINT_COPIES(2);//指定份数为2份 如果一个任务里有多页,打印份数的时候,有两种输出方式,一 ...

  9. LODOP中设置设置图片平铺水印，超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

  10. 支持“ReportDbContext”上下文的模型已在数据库创建后发生更改

    支持“ReportDbContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkI ...