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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>

以上代码实现了我们的要求，可以出现明码的提示，当输入密码的时候就是以密码方式输入。

实现的原理非常的简单，在默认状态以type="text"文本框显示，当点击文本框的时候，以type="password"密码框显示，原来显示的文本框隐藏，也就是说做了一个替换而已。

赞 (0)

相关推荐

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

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

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

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

    本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="

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

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

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

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

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

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

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

  • 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

  • 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); $("#"

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

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

  • 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=&

  • 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

随机推荐