輸入文本框時的友好提示
在輸入文本框內容時，有時候需要提示用戶輸入的內容，爲了更友好的提示用戶，我用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>
|
|