原生js实现密码输入框值的显示隐藏


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下

直接贴上代码

<!DOCTYPE html>
<html>
<head>
 <title>password intput demo</title>
</head>
<style type="text/css">
body{
 margin:0px; 
 background-color: white; 
 font-family: 'PT Sans', Helvetica, Arial, sans-serif; 
 text-align: center; 
 color: #A6A6A6; 
}
/*输入框样式,去掉背景阴影模仿原生应用的输入框*/
input{
width: 100%; 
height: 50px; 
border:none; 
padding-left:3px; 
font-size: 18px; 
}
input:focus { 
 outline: none; 
}
/*显示\隐藏密码图片*/
img{
width: 40px;
height: 25px;
position: absolute; 
right: 0px; 
margin: 15px; 
}
/*登录按钮*/
button{ 
 width: 200px; 
 height: 50px; 
 margin-top: 25px; 
 background: #1E90FF; 
 border-radius: 10px; 
 border:none;
 font-size: 18px;
 font-weight: 700; 
 color: #fff;
}
button:hover {
background: #79A84B; 
outline: 0;
}
/*输入框底部半透明横线*/
.input_block {
 border-bottom: 1px solid rgba(0,0,0,.1);
}
/*container*/
#page_container{
 margin: 50px;
}
</style>

<body>

<div id="page_container">
 <!--密码输入框-->
 <div class="input_block">
 <img id="demo_img" onclick="hideShowPsw()" src="visible.png">
 <input type="password" id="demo_input" placeholder="Password"/>
 </div>

 <button onclick="">Login</button>
</div>

<script type="text/javascript">
 // 这里使用最原始的js语法实现,可对应换成jquery语法进行逻辑控制
 var demoImg = document.getElementById("demo_img");
 var demoInput = document.getElementById("demo_input");
 //隐藏text block,显示password block
 function hideShowPsw(){
 if (demoInput.type == "password") {
 demoInput.type = "text";
 demo_img.src = "invisible.png";
 }else {
 demoInput.type = "password";
 demo_img.src = "visible.png";
 }
 }
</script>

</body>
</html>

附上图片:

原生js实现密码输入框值的显示隐藏

原生js实现密码输入框值的显示隐藏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
js星星评分效果
Jul 24 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
React Native实现进度条弹框的示例代码
Jul 17 #Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
You might like
星际争霸中的热键
2020/03/04 星际争霸
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
PHP重载基础知识回顾
2020/09/10 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
js实现左右两侧浮动广告
2018/07/09 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python cookie反爬处理的实现
2020/11/01 Python
python压包的概念及实例详解
2021/02/17 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
就业协议书范本
2014/04/11 职场文书
责任心演讲稿
2014/05/14 职场文书
廉洁教育学习材料
2014/05/19 职场文书
运动会演讲稿100字
2014/08/25 职场文书
树转促学习心得体会
2014/09/10 职场文书
教师工作决心书
2015/02/04 职场文书
如何写观后感
2015/06/19 职场文书