LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】JS实现WEB页面上的密码输入框type属性从password切换为text,显示和隐藏原始内容

admin
2024年11月19日 17:57 本文热度 391

1、需求背景

  在设置密码信息时,需要支持输入内容的隐藏和可见的切换,效果如下:

  隐藏:

  显示:

2、实现原理:

  1. 设置两个input,一个type为password,一个type为text,分别用于显示隐藏密码和可见密码

  2. 设置两个字体图标,一个为睁开的眼睛,一个为闭上的眼睛,用于点击切换两个input的显示,当然,图标的样式可以任意定义

  3. 保证两个input的值相同

3、代码实现:

  1. html

密码:

<input type="password" class="input-password1" name="password1" id="password1" />

<input type="text" class="input-password2" name="password2" id="password2" />

<i class="fa fa-eye-open" id="togglePassword"></i>

2. css

/* 设置眼睛图标的样式 */

.fa{

  width: 24px;

  height:24px;

  cursor: pointer;

  margin-left: -30px; /* 将眼睛图标放在input框中 */

}

.input-password2{

  display: none; /* 初始状态隐藏第二个input框 */

}

/* 隐藏掉ie中默认实现的眼睛 */

.input-password1::-ms-reveal {

  display: none;

}

/* 隐藏掉ie中默认实现的x号 */

.input-password2::-ms-clear {

  display: none;

}

3. js

<script type="text/javascript">

  // 监听切换显示与隐藏的点击事件

  $('#togglePassword').click(function() {

    if ($(this).hasClass('fa-eye-open' )) {

      $('#password1').hide();

      $('#password2').show();

      $(this).removeClass('fa-eye-open').addClass('fa-eye-close');

    } else {

      $('#password1').show();

      $('#password2').hide();

      $(this).removeClass('fa-eye-close').addClass('fa-eye-open');

    }

  });

  

  // 监听两个input值的change事件,修改另一个input的值,保证二者一致

  $('#password1').change(function() {

    $('#password2').val($(this).val());

  });

  $('#password2').change(function() {

    $('#password1').val($(this).val());

  });

</script>

4、注意事项:

  a、本文代码使用了jquery,需引入;使用了字体图标,需引入;

  b、IE中默认对type为password的input设置了眼睛图标用于显示密码,对type为text的input设置了×号图标用于清除内容,本文将其设置为隐藏,保证浏览器兼容性;

  c、因为两个input保存的值是一致的,因此在校验和提交表单时,只需处理其中一个即可。


其他方法:

为什么要用隐藏接收他的密码呢,哪用这么复杂!?直接用jquery改变密码输入框的type属性为text啊,源码如下:

if ($("#pwd").attr("type") == "password")

{

  $("#pwd").attr("type", "text");

} else {

  $("#pwd").attr("type", "password");

}


该文章在 2024/11/19 18:07:03 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved