前一段时间因为工作需要要求在密码输入框里边添加进信息,但是正常的文本框控件只能显示星号,后来用了一个以假乱真的办法终于达到目的这里写一个小例子供大家分享。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>测试内容看看能不能通过</title>
- <script language="javascript" type="text/javascript">
- // JScript 文件
- function getStar(control,logValue,txt)
- {
- if(control.value==logValue)
- {
- control.value="";
- control.style.color="black";
- if(control.type=="text"){
- control.style.display = "none";
- document.getElementById('pass').style.display = "block";
- document.getElementById('pass').style.color="black";
- document.getElementById('pass').value="";
- document.getElementById('pass').focus();//加上
- }else{
- var pass = document.getElementById('pass').value;
- if(pass.length<1){
- control.style.display = "none";
- document.getElementById('log').style.display = "block";
- }
- }
- }
- }
- function GetEnd(control,logValue,txt)
- {
- if(control.value=="")
- {
- control.value="输入内容";
- control.style.color="gainsboro";
- if(control.type=="password"){
- control.style.display = "none";
- document.getElementById('log').style.display = "block";
- document.getElementById('log').value="输入内容";
- document.getElementById('log').style.color="gainsboro";
- //document.getElementById('log').focus();//加上
- }
- else{
- var pass = document.getElementById('log').value;
- if(pass.length<1){
- control.style.display = "none";
- document.getElementById('log').style.display = "block";
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <input id="log" name="log" value="输入内容" style="width: 169px; color: gainsboro" type="text" onfocus="getStar(this,'输入内容','password')"/>
- <input id="pass" name="pass" style="display:none; width: 169px;" type="password" onblur="GetEnd(this,'输入内容','password')" />
- </body>
- </html>