html文本框提示效果的示例代码
完整代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> <head> <title>html文本框提示效果</title> <styletype="text/css"> *{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1pxsolid#ccc; } </style> </head> <body> <scriptlanguage="javascript"> functiontips(id,str){ varl=document.getElementById(id).offsetLeft+120; vart=document.getElementById(id).offsetTop; document.getElementById("tips").innerHTML="提示:"+str; document.getElementById("tips").style.left=l+"px"; document.getElementById("tips").style.top=t+"px"; document.getElementById("tips").style.display=""; } functionouttips(){ document.getElementById("tips").style.display='none'; } </script> <divid="tips"style="position:absolute;border:1pxsolid#ccc;padding:0px3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div> <br/> 姓名:<inputtype="text"id="username"onfocus="tips('username','姓名长度最多16个字符')"onblur="outtips()"/> <br/> 密码:<inputtype="password"id="password"onfocus="tips('password','密码长度必须在3-18位之间')"onblur="outtips()"/> </body> </html>