JS实现密码框的显示密码和隐藏密码功能示例


Posted in Javascript onDecember 26, 2016

本文实例讲述了JS实现密码框的显示密码和隐藏密码功能。分享给大家供大家参考,具体如下:

运行效果图如下:

JS实现密码框的显示密码和隐藏密码功能示例

完整实例代码:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <form method="POST" action="" name="forms">
      <span id=box><input type="password" name="password" size="80" style="width:150;" value="sina.com"></span>
      <span id=click><a href="javascript:showps()">显示密码</a></span>
    </form>
  </body>
 <script language="JavaScript">
    function showps(){
     if (this.forms.password.type="password") {
      document.getElementById("box").innerHTML="<input type=\"text\" name=\"password\" size=\"80\" style='width:\"150\";' value="+this.forms.password.value+">";
      document.getElementById("click").innerHTML="<a href=\"javascript:hideps()\">隐藏密码</a>"
     }
    }
    function hideps(){
     if (this.forms.password.type="text") {
      document.getElementById("box").innerHTML="<input type=\"password\" name=\"password\" size=\"80\" style='width:\"150\";' value="+this.forms.password.value+">";
      document.getElementById("click").innerHTML="<a href=\"javascript:showps()\">显示密码</a>"
     }
    }
 </script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
原生JS下拉加载插件分享
Dec 26 #Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 #Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 #Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 #Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP 8新特性简介
2020/08/18 PHP
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
详解Python_shutil模块
2019/03/15 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
django实现支付宝支付实例讲解
2019/10/17 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python实现AI换脸功能
2020/04/10 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
人事部专员岗位职责
2014/03/04 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
毕业生个人总结
2015/02/28 职场文书
计划生育工作总结2015
2015/04/03 职场文书
客户答谢会致辞
2015/07/30 职场文书
期中考试后的感想
2015/08/07 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
原生JS中应该禁止出现的写法
2021/05/05 Javascript
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
新手入门Mysql--概念
2021/06/18 MySQL