在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. OpenGL ES: (4) EGL API详解 (转)

    上一节我们初步学习了 OpenGL ES.EGL.GLSL 的相关概念,了解了它们的功能,以及它们之间的关联.我们知道了 EGL 是绘制 API(比如 OpenGL ES)与 底层平台窗口系统之间的接 ...

  2. MySQL TiDB PingCAP mydumper

    MySQL备份之[mydumper 学习] - jyzhou - 博客园https://www.cnblogs.com/zhoujinyi/p/3423641.html maxbube/mydumpe ...

  3. SSH SCP 远程密钥登录配置和服务器间的文件传输

    目录 ssh ssh是什么 ssh安装 使用ssh登录远程主机 退出登录 使用ssh执行单条指令 密钥验证 详细操作 scp rsync sftp 进阶 ssh ssh是什么 ssh (Secure ...

  4. 微信小程序与Html交互

    微信小程序与H5页面交互 https://www.jianshu.com/p/22e951d83841

  5. mac中matplotlib不支持中文的解决办法

    参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...

  6. 按钮显示隐藏div、input等

    <script type="text/javascript"> function show() { var value = document.getElementByI ...

  7. Spring cloud微服务安全实战-5-3后端服务改造

    本节来实现一个登陆的效果. 需要一个登陆前的页面和登陆后的页面. 直接粘贴过来的代码 这是一个和后台的绑定 后台要有个autenticated的对象来实现绑定,ts内我们定义这个autenticate ...

  8. Spring cloud微服务安全实战-3-14章节小结

    认证:一个httpBasic 一个是用户名密码的认证 授权:数据库内判断的r就是读 w就是写 ,ACL 获取用户信息的这段逻辑,实际上着也是安全机制的一种.防止越权,当前只能看到自己的信息. Spri ...

  9. LeetCode_326. Power of Three

    326. Power of Three Easy Given an integer, write a function to determine if it is a power of three. ...

  10. sentinel搭建redis集群的注意事项

    一.protected-mode 默认情况下,redis node和sentinel的protected-mode都是yes,在搭建集群时,若想从远程连接redis集群,需要将redis node和s ...