JS实现表单中点击小眼睛显示隐藏密码框中的密码

2024-03-14 23:40:29

领导交个一个任务，要求在表单中点击小眼睛显示隐藏密码框中的密码！在一些网站中经常会用到这样的功能，今天小编就给大家分享我的实现思路及代码

准备：

1.两张png图片，一张睁眼，一张闭眼，可以到阿里巴巴矢量图库寻找（免费下载）

最终效果图

css样式部分，样式可根据自己喜好设置，没有过硬要求

<style>
    div:first-child {
      width: 300px;
      height: 50px;
      background-color: red;
      color: white;
      margin: 20px auto;
      text-align: center;
      line-height: 50px;
    }

    div:nth-child(2) {
      position: relative;
      width: 300px;
      height: 50px;
      margin: 100px auto;
    }
    input {
      width: 300px;
      height: 46px;
      border: 0px white;
      border-bottom: 1px solid black;
      outline: none;
    }
    #eyes {
      width: 18px;
      position: absolute;
      top: 27px;
      right: 2px;
    }
  </style>

主体部分

 <div>
    密码
  </div>
  <div>
    <input type="password">
    <!--默认闭眼图-->
    <label><img src="1.png" alt="" id="eyes"></label>
  </div>

js部分

<script>
      //获取元素（两种方式都可以）
    var input = document.querySelector('input')
    var imgs = document.getElementById('eyes');
    //下面是一个判断每次点击的效果
    var flag = 0;
    imgs.onclick = function () {
      if (flag == 0) {
        input.type = 'text';
        eyes.src = '2.png';//睁眼图
        flag = 1;
      } else {
        input.type = 'password';
        eyes.src = '1.png';//闭眼图
        flag = 0;
      }
    }
  </script>

总结

到此这篇关于JS实现表单中点击小眼睛显示隐藏密码框中的密码的文章就介绍到这了,更多相关js 密码框点击小眼睛显示隐藏密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js实现input密码框提示信息的方法(附html5实现方法)

本文实例讲述了js实现input密码框提示信息的方法.分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下: <input type="text" onfocus="changeTip(this);" id="passTe
JS实现密码框的显示密码和隐藏密码功能示例

本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="
js正则实现的密码框简单制作,还可以替换成自己想用得符号

密码框简单制作,还可以替换成自己想用得符号. <style type="text/css"> #c { position: relative; } #a { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; } #b { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; -moz-opacit
JavaScript如何实现在文本框(密码框)输入提示语

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g
基于JS实现密码框(password)中显示文字提示功能代码

其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val
javascript 密码框防止用户粘贴和复制的实现代码

<input id="password" type="password" onpaste="return false" onselectstart="return false" /> onpaste="return false":防止粘贴 onselectstart="return false":防止自制
JavaScript实现输入框(密码框)出现提示语

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g
JS实现表单中点击小眼睛显示隐藏密码框中的密码

领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px
js简单实现表单中点击按钮动态增加输入框数量的方法

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
JS实现表单中checkbox对勾选中增加边框显示效果

本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果.分享给大家供大家参考.具体如下: 这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果.貌似目前比较流行的效果啦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-checkbox-check-border-show-codes/ 具体代码如下: <!doctype html
JS实现点击链接切换显示隐藏内容的方法

本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer
js实现键盘上下左右键选择文字并显示在文本框的方法

本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo
JS获取表单中的元素和取值方法

获取表单的四种方式 1.document.表单名称 2.document.getElementById(表单 id); 3.document.forms[表单名称] 4.document.forms[索引]; //从 0 开始 <body>  <
js实现的点击超链显示隐藏层

点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati
js实现表单Radio切换效果的方法

本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:
使用vbscript脚本在表单中进行选择的代码

问: 嗨,Scripting Guy!我想创建一个带有四个单选按钮的表单,其中每个按钮各代表一台计算机.可以选择一个单选按钮,单击另一个按钮,然后脚本将在所选的计算机上运行.我怎样才能做到? -- CW 答: 嗨,CW.如果我们所说的只是 VBScript 和 Windows Script Host,那么这个问题很简单:办不到.除了显示消息框以外,VBScript 和 WSH 都无法创建图形用户界面:没办法通过脚本使用单选按钮.列表框.下拉列表以及其他图形元素. 但是--噢,你们以前一定见过这种
js实现二级菜单点击显示当前内容效果

最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q

JS实现表单中点击小眼睛显示隐藏密码框中的密码

相关推荐

随机推荐