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

时间:2020-05-12 人气:0

下面的代码实现当用户停留在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> 
</p> 
</blockquote> 
</blockquote> 
</form> 
<div> 
<table width="100%" border="0" cellpadding="4" cellspacing="1"> 
<tr > 
<td width="100%" height="25" ><div></div></td> 
</tr> 
</table> 
</div> 
</body> 
</html>

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

加载全部内容