脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js密码框显示隐藏功能

js实现input密码框显示/隐藏功能

 更新时间：2020年09月10日 16:53:49   作者：dq_095  
这篇文章主要为大家详细介绍了js实现input密码框显示和隐藏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下

实现代码：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 .password{
 position: relative;
 width: 280px;
 height: 60px;
 }
 .password,.n-txtCss{
 display: flex;
 align-items: center;
 }
 .password .fa{
 position: absolute;
 right: 10px;
 top:15px;
 font-size: 20px;
 cursor: pointer;
 }

 .fa-eye-slash{
 margin-top: 6px;
 margin-left: 7px;
 width: 24px;
 height: 20px;
 background-image: url(./vivo_img/login/eye-password.png);
 background-repeat: no-repeat;
 background-size: 24px 17px;
 }
 .fa-eye{
 margin-top: 6px;
 width: 24px;
 margin-left: 7px;
 height: 20px;
 background-image: url(./vivo_img/login/eye-password-active.png);
 background-repeat: no-repeat;
 background-size: 24px 17px;

 }

 </style>
 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

</head>
<body>
 <dd class="password">
 <input type="password" name="" placeholder="设置密码：8-16位字母和数字" maxlength="16" style="outline: none;width: 240px;">
 <i class="fa fa-eye-slash"></i>
 </dd>
<script type="text/javascript">
 $(".password").on("click", ".fa-eye-slash", function () {
 $(this).removeClass("fa-eye-slash").addClass("fa-eye");
 $(this).prev().attr("type", "text");
 });
 
 $(".password").on("click", ".fa-eye", function () {
 $(this).removeClass("fa-eye").addClass("fa-eye-slash");
 $(this).prev().attr("type", "password");
 });
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Bootstrap BootstrapDialog使用详解

    Bootstrap BootstrapDialog使用详解

    这篇文章主要为大家详细介绍了Bootstrap BootstrapDialog使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • uniapp web-view组件双向通信的问题记录

    uniapp web-view组件双向通信的问题记录

    本文主要介绍在uniapp中页面与webview组件内页面的双向通信问题,本文通过图文实例代码相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • alert和confirm功能介绍

    alert和confirm功能介绍

    这篇文章主要为大家介绍了alert和confirm的功能,需要的朋友可以参考下
    2014-05-05
  • H5用户注册表单页 注册模态框!

    H5用户注册表单页 注册模态框!

    这篇文章主要为大家详细介绍了H5用户注册表单页的相关代码，注册模态框，如何设计用户注册表单页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript实现带音效的烟花特效

    JavaScript实现带音效的烟花特效

    这篇文章主要为大家介绍了通过JavaScript实现的带音效的烟花特效，文中的示例代码简洁易懂，对我们学习JavaScript有一定的帮助，感兴趣的可以了解一下
    2021-12-12
  • js关于精确计算和数值格式化以及直接引js文件

    js关于精确计算和数值格式化以及直接引js文件

    本文为大家介绍下关于精确计算和数值格式化以及直接引js文件，大家可以学习下
    2014-01-01
  • JavaScript中条件语句的优化技巧总结

    JavaScript中条件语句的优化技巧总结

    这篇文章主要给大家介绍了关于JavaScript中条件语句的优化技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js 倒计时（高效率服务器时间同步）

    js 倒计时（高效率服务器时间同步）

    首先说一下，为什么要服务器时间同步， 因为服务器时间和本地电脑时间存在一定的时间差。有些对时效性要求非常高的应用，例如时时彩开奖，是不能容忍这种时间差存在的
    2017-09-09
  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    这篇文章主要为大家详细介绍了JS组件Bootstrap实现下拉菜单效果代码，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • js实现动态增加文件域表单功能

    js实现动态增加文件域表单功能

    这篇文章主要为大家详细介绍了js实现动态增加文件域表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10

最新评论