JS实现登录页密码的显示和隐藏功能

 更新时间:2017年12月06日 14:27:06   作者:w冰淇淋   我要评论
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能,需要的朋友参考下吧

在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码:

在没给大家分享实现代码之前,先给大家展示下效果图:

这里写图片描述

这里写图片描述

<ul class="form-area">
 <li>
  <div class="item-content">
   <div class="item-input">
    <input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
   </div>
  </div>
 </li>
 <li>
  <div class="item-content">
   <div class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
   </div>
  </div>
 </li>
 <li>
  <span style="position:absolute;right: 20px;top: -38px">
   <img id="showText" onclick="hideShowPsw()">
  </span>
 </li>
</ul>
<script type="text/javascript">
//获取input框内的切换图片id和input文本框的id
 var demoImg = document.getElementById("showText");
 var demoInput = document.getElementById("password");
 function hideShowPsw() {
  if (demoInput.type == "password") {
   demoInput.type = "text";
   demoImg.src ="http://www.jb51.net/article/129899.htm/../Images/showPasswd.png";
  } else {
   demoInput.type = "password";
   demoImg.src = "../Images/hidePasswd.png";
  }
 }
</script>

总结

以上所述是小编给大家介绍的JS实现登录页密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!

相关文章

  • javascript实现类似百度分享功能的方法

    javascript实现类似百度分享功能的方法

    这篇文章主要介绍了javascript实现类似百度分享功能的方法,以实例形式较为完整的分析了基于javascript实现百度分享功能所涉及的样式与分享功能实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 详解js的六大数据类型

    详解js的六大数据类型

    js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型(Object)。下面就跟着小编一起来看下吧
    2016-12-12
  • 深入理解JavaScript 参数按值传递

    深入理解JavaScript 参数按值传递

    本篇文章主要介绍了深入理解JavaScript 参数按值传递,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • BootStrap Table 获取同行不同列元素的方法

    BootStrap Table 获取同行不同列元素的方法

    表格同行中存在元素的相互调用,如何保证元素能够被同行不同列的其他方框使用呢?下面通过实例代码给大家介绍下,一起看看吧
    2016-12-12
  • Javascript图像处理思路及实现代码

    Javascript图像处理思路及实现代码

    HTML5的canvas提供了getImageData接口来获取canvas中的数据,所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵,需要了解的朋友可以详细参考下
    2012-12-12
  • 基于JavaScript实现手机短信按钮倒计时(超简单)

    基于JavaScript实现手机短信按钮倒计时(超简单)

    在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下
    2015-12-12
  • JavaScript 三种不同位置代码的写法

    JavaScript 三种不同位置代码的写法

    客户端脚本JavaScript在写法上其实有很多种方法,它们的放置位置也非常之多。
    2009-10-10
  • javascript检查浏览器是否支持flash的实现代码

    javascript检查浏览器是否支持flash的实现代码

    这篇文章主要介绍了javascript检查浏览器是否支持flash的实现代码,需要的朋友可以参考下
    2014-08-08
  • 浅谈$_FILES数组为空的原因

    浅谈$_FILES数组为空的原因

    下面小编就为大家带来一篇浅谈$_FILES数组为空的原因。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 基于javascript实现漂亮的页面过渡动画效果附源码下载

    基于javascript实现漂亮的页面过渡动画效果附源码下载

    本文通过javascript实现漂亮的页面过滤动画效果,用户通过点击页面左侧的菜单,对应的页面加载时伴随着滑动过滤动画,并带有进度条效果。用户体验度非常好,感兴趣的朋友一起看看吧
    2015-10-10

最新评论