比较实用的js表单动态提示输入效果

现在的位置: 首页＞JavaScript＞正文

上篇下篇

比较实用的js表单动态提示输入效果

2010年05月28日 ⁄ JavaScript ⁄ 评论数 1 ⁄ 被围观 1,125+

      刚刚开始研究JavaScript，昨天做了一个比较实用的动态表单验证，主要用到了onfocus何onblur两个事件，还用到了两个HTMLElement 对象的属性。
offsetLeft
返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
类型：int 状态：只读
offsetTop
返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。
类型：int 状态：只读
    提示框使用的position:absolute进行绝对定位，以及display:none和display:block来对提示框的显示和隐藏。
    以下是效果：

<!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>js表单动态提示框-www.25zy.com</title> <style type="text/css"> body{ font-size:12px; font-family:tahoma; padding:0px; margin:0px;} .content{ width:400px; overflow:hidden; margin:60px auto auto auto; line-height:20px; border:1px #CCC solid;} .content span{ padding-left:5px;} .mes{ color:#F00;position:absolute;border:1px dashed #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc;} input{ width:120px; height:20px; vertical-align:middle; line-height:20px;} </style> <script language="javascript" type="text/javascript"> function chicksin(textid,str){ var l =document.getElementById(textid).offsetLeft+130; var t =document.getElementById(textid).offsetTop; mess = document.getElementById("mes"); mess.innerHTML = str; mess.style.left = l+"px"; mess.style.top = t+"px"; mess.style.display = "block";} function chicksout(){ mess = document.getElementById("mes"); mess.style.display = "none"; } </script> </head> <body> <div class="content"> <p><span>用户名：<input name="userid" type="text" id="user" onfocus="chicksin('user','请输入进入人间的用户名')" onblur="chicksout()" /></span></p> <p><span>密   码：<input name="pwd" type="text" id="password" onfocus="chicksin('password','请输入密码！')" onblur="chicksout()"/></span></p> <span class="mes" id="mes"> </span> </div> </body> </html>

提示：你可以先修改部分代码再运行。