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

最新推荐文章于 2023-10-15 10:58:51 发布

shsunge

最新推荐文章于 2023-10-15 10:58:51 发布

阅读量350

点赞数 2

分类专栏： javaScript 文章标签： JavaScript XHTML HTML ViewUI

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

输入文本框时的友好提示

在输入文本框内容时，有时候需要提示用户输入的内容，为了更友好的提示用户，我用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" οnfοcus="tip(this,'可输入用户名或邮箱')"/><br/>   

密码： <input name="dd" onBlur="notTip()" type="text" οnfοcus="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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。