原生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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
webpack css加载和图片加载的方法示例
Sep 11 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python编程求质数实例代码
2018/01/31 Python
Python 12306抢火车票脚本
2018/02/07 Python
django用户登录和注销的实现方法
2018/07/16 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python绘制分布折线图的示例
2020/09/24 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
Eclipse面试题
2014/03/22 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
公司前台辞职报告
2014/01/19 职场文书
听证通知书
2015/04/24 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
redis实现的四种常见限流策略
2021/06/18 Redis
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers