javascript 输入文本框时的友好提示
作者:bea
下面的代码实现当用户停留在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-transit
下面的代码实现当用户停留在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 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>
[Ctrl+A 全选 注:
如需引入外部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=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 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>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 读取table内容的javascript代码
- js 页面传参数时 参数值含特殊字符的问题
- input 日期选择功能的javascript代码
- JQuery下关于$.Ready()的分析
- javascript下搜索子字符串的的实现代码()
- javascript与asp.net(c#)互相调用方法
- JavaScript 字符串与数组转换函数[不用split与join]
- 魔方在线秒表javascript版
- jQuery 行背景颜色的交替显示(隔行变色)实现代码
- 页面中iframe相互传值传参
- jquery提示 "object expected"的解决方法
- js 加载并解析XML字符串的代码
- javascript 强制刷新页面的实现代码
- ExtJS下grid的一些属性说明
- 用于CSS代码压缩与格式化的javascript函数代码
- javascript 数组使用方法汇总
- jQuery Selectors(选择器)的使用(九、表单对象属性篇)
- 用jquery ajax获取网站Alexa排名的代码
- jValidate 基于jQuery的表单验证插件