原生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 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
简单的Jquery全选功能
Nov 07 Javascript
javascript冒泡排序小结
Apr 10 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
js实现页面图片消除效果
Mar 24 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python pandas常用函数详解
2018/02/07 Python
使用TensorFlow实现SVM
2018/09/06 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
浅析Python 序列化与反序列化
2020/08/05 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
承诺书模板大全
2015/05/04 职场文书
心理学培训心得体会
2016/01/22 职场文书