原生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实现经典扫雷游戏
Apr 23 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
Vue.js用法详解
Nov 13 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
班长岗位职责
2013/11/10 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
房产公证书范本
2014/04/10 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
经管应届生求职信范文
2014/05/18 职场文书
市场营销毕业求职信
2014/08/07 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
大学生求职自荐信
2015/03/24 职场文书
Python爬取某拍短视频
2021/06/11 Python
浅谈redis整数集为什么不能降级
2021/07/25 Redis
SQL SERVER存储过程用法详解
2022/02/24 SQL Server