输入文本框时的友好提示
?
在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用js写了一种方法，当点击文本框时，在文本框右边提示用户要输入的信息。
?
在输入内容前，显示如图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=utf-8" /> <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"> ????? 【提示控件演示】<br/> ??????? 用户名： ??????? <input name="dd"? onBlur="notTip()" type="text"? onfocus="tip(this,'可输入用户名或邮箱')"/><br/> ?????? 密码： <input name="dd"? onBlur="notTip()" type="text"? onfocus="tip(this,'请输入密码')"/> ??????? <br/> ??????? </p> ??? </blockquote> ? </blockquote> </form> <div id='tipDiv' style='position:absolute;z-index:1000;display:none;width:50;heiht:40'> ? <table width="100%" border="0" cellpadding="4" cellspacing="1"> ??? <tr > ????? <td width="100%" height="25" ><div id="taemTip" style="background:#CFC"></div></td> ??? </tr> ? </table> </div> </body> </html>
|
? ? |
?