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表单(form)操作技巧大全》《JavaScript查找算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 基于JS实现密码框(password)中显示文字提示功能代码

    基于JS实现密码框(password)中显示文字提示功能代码

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

  • JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

    本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果.分享给大家供大家参考,具体如下: 思路: 1.首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" /> 2.当文本框获取焦点后,把默认值清空,把type改为password. 3.当文本框失去焦点后,把type改为txt,把默认值设为"请输入密码". JS代码: window.onload=functi

  • JavaScript如何实现在文本框(密码框)输入提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • js获取form的方法

    本文实例讲述了js获取form的方法.分享给大家供大家参考.具体如下: 先来看下面代码: <html> <head> <scirpy> window.onload=function(){ var f1=document.f1; var f2=document.forms[1]; alert(f2.id); var f3=document.forms['f1']; } </script> </head> <body> <form

  • JS中的form.submit()不能提交表单的错误原因

    直接上代码把: 复制代码 代码如下: <div id="register">      <h4>会员注册</h4>      <div class="formdiv">          <form method="post" action="register.php?action=register" name="register" id="r

  • js正则实现的密码框简单制作,还可以替换成自己想用得符号

    密码框简单制作,还可以替换成自己想用得符号. <style type="text/css"> #c { position: relative; } #a { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; } #b { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; -moz-opacit

  • JavaScript实现输入框(密码框)出现提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • js实现input密码框提示信息的方法(附html5实现方法)

    本文实例讲述了js实现input密码框提示信息的方法.分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input  type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下: <input type="text" onfocus="changeTip(this);" id="passTe

  • javascript 密码框防止用户粘贴和复制的实现代码

    <input id="password" type="password" onpaste="return false" onselectstart="return false" /> onpaste="return false":防止粘贴 onselectstart="return false":防止自制

  • form表单action提交的js部分与html部分

    1.JS部分代码 复制代码 代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $("#"+formName).attr("action",action); //var f = document.getElementsByTagName("form")[0]; //alert(f.action); $("#"

  • jsp form表单方法示例

    1.代码: 复制代码 代码如下: <%-- Document : index Created on : 2009-10-4, 13:56:46 Author : lucifer --%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv=&

随机推荐