js下在password表單內顯示提示信息的解決辦法

2019-11-21 01:57:33

字體：大中小

來源：轉載

供稿：網友

經典有人要這個代碼，考慮到password中輸入的內容會顯示為*號，所以要想辦法解決*的問題。當初想用setAttribute動態修改type屬性達到效果，再ff下測試成功，但沒想到setAttribute對type屬性的修改在ie中無效。最終采用背景圖片的方式解決了這個。即為password設定一個背景圖片，圖片文字為提示信息
如：<img src="http://files.VeVB.COm/upload/20070819124037566.gif" />,
當鼠標放上時不顯示背景圖片。
代碼如下：

<!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" xml:lang="en" lang="en">  <head>    <title></title>    <style type="text/css">    *{    margin:0px;padding:0px;font-size:12px;    }      input{        width:150px;height:20px;line-height:20px;border:1px solid #ccc;      }    </style>  </head>  <body>  <script language="javascript">  function chgForm(id){      if(document.getElementById(id).value=="密碼長度必須在3-18位之間")          document.getElementById(id).value="";      document.getElementById(id).setAttribute("type","password");  }  function chkForm(id){      if(document.getElementById(id).value.length==0){          document.getElementById(id).setAttribute("type","text");          document.getElementById(id).value="密碼長度必須在3-18位之間";      }  }  function chkFormpic(id){      if(document.getElementById(id).value.length==0){          document.getElementById(id).style.background='url(/upload/20070819124037566.gif) no-repeat';      }  }  </script>    姓名：<input type="text" id="username" value="姓名長度最多16個字符" onfocus="this.select()" />    動態修改input的type屬性（僅在ff下有效）：    密碼：<input type="text" id="password" onmouseover="chgForm('password')" value="密碼長度必須在3-18位之間" onmouseout="chkForm('password')" />  圖片提示(在ff/ie下均有效）：  密碼：<input type="password" id="p1" onmouseover="this.style.background=''" style='background:url(/upload/20070819124037566.gif) no-repeat'  onmouseout="chkFormpic('p1')" />  </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：圖片格式的JavaScript和CSS速查手冊

下一篇：用js實現的一個根據內容自動生成表格的函數