js写的文本框友好信息提示

9708989

浏览: 50501 次
性别:
来自: 北京

最近访客更多访客>>

zhijin

shenht

theanswerli

mywang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

JavaScript XHTML HTML

输入文本框时的友好提示

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

<head>

<title>tt控件演示</title>

//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>

  【提示控件演示】<br/>

用户名：

密码： <input name="dd" onBlur="notTip()" type="text" onfocus="tip(this,'请输入密码')"/>

<br/>

</p>

</blockquote>

</form>

<tr >

</tr>

</table>

</div>

</body>

</html>

0
顶

0
踩

分享到：

Url传递参数和接收参数时的中文乱码处理 | 自定义标签分页源代码---第三章

2009-12-11 13:59
浏览 3466
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论