javascript 输入文本框时的友好提示

下面的代码实现当用户停留在text输入框的时候提示输入什么的提示信息，提高用户粘合度。

在输入内容前，显示如图1所示

图1

当用户名的文本框或得焦点时，效果如图2所示

图2

当密码文本框或得焦点时，效果如图3所示

图3

演示的源代码如下：

<！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>tt控件演示</title> <script language="javascript" > //tipTxt要显示的内容，apos向右移动的距离，vpos向下移动的距离 function tip（tt,tipTxt,apos,vpos）{ if（apos==undefined）{ var apos=0; } if（vpos==undefined）{ var vpos=0; } var dads = document.all.tipDiv.style; dads.display="block"; var th = tt; var ttop = tt.offsetTop-tt.clientHeight+vpos; //TT控件的定位点高 var thei = 20; //TT控件本身的高 var tleft = tt.offsetLeft; var tleft = tt.offsetLeft+tt.offsetWidth+apos; var twidth=100; var ttyp = tt.type; while （tt = tt.offsetParent）{ ttop+=tt.offsetTop; tleft+=tt.offsetLeft; } dads.top = ttop+thei+6; dads.left = tleft; dads.width =twidth; document.all.taemTip.innerHTML="<font color="red">"+tipTxt+"</font>"; } function notTip（）{ var dads = document.all.tipDiv.style; dads.display="none"; } </script> </head> <body> <form action="" method="get"> <blockquote> <blockquote> <p align="center">   【提示控件演示】 用户名： <input name="dd" onBlur="notTip（）" type="text" onfocus="tip（this,"可输入用户名或邮箱"）"/><br>    密码： <input name="dd" onBlur="notTip（）" type="text" onfocus="tip（this,"请输入密码"）"/> <br> <br/> </blockquote> </blockquote> </form><table width="100%" border="0" cellpadding="4" cellspacing="1"> <tr > <td width="100%" height="25" ></td> </tr> </table></body> </html>

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