js写的文本框友好信息提示
输入文本框时的友好提示
?
在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用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>
?
?
?