收藏本站 
广告服务 
网站地图 
>> 为你提供近10万篇各类电脑技术文章、网络技术教程、软件技术文章、网页设计教程、平面设计教程、数据库技术教程等方面的电脑教程!
先飞电脑技术网技术文章网络编程JavaScript
网络编程 | 网站建设 | 网络技术 | 设计教程 | 软件教学 | 程序开发 | 数据库开发 | 教育认证 | 硬件维护 | 媒体动画 | 机械电子 |

JavaScript实现文本框提示效果

[ 作者:佚名    转贴自:网络转载    阅读次数:102    更新时间:2007-10-22 12:21:00   录入:刘光勇 ]         
    <!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  *{
  margin:0px;padding:0px;font-size:12px;
  }
    input{
      width:100px;height:20px;border:1px solid #ccc;
    }

  </style>
</head>

<body>
<script language="javascript">
function tips(id,str){
var l=document.getElementById(id).offsetLeft+120;
var t=document.getElementById(id).offsetTop;
document.getElementById("tips").innerHTML="提示:"+str;
document.getElementById("tips").style.left=l+"px";
document.getElementById("tips").style.top=t+"px";
document.getElementById("tips").style.display="";
}
function outtips(){
    document.getElementById("tips").style.display='none';
}
</script>
<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>
<br />
姓名:<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />
<br />
密码:<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />
</body>
</html>
文章首页【加入到收藏夹】告诉好友】【打印此文】【关闭窗口
  版权声明:本站提供的“JavaScript实现文本框提示效果”版权归文章所有者,转载请注明出处!
 ·上一篇文章:CSS配合JS实现鼠标触发TD背景变色      ·下一篇文章:没有了
相关文章
·ASP.NET AJAX中的异步Web Services调用[106]
·AJAX学习 理解JavaScript函数[101]
·在JAVA文件中获取该项目的相对路径[54]
·AJAX应用之注册用户即时检测[79]
·JavaScript实现文本框提示效果[102]
网站主页 | 收藏本页 | 联系我们 | 广告服务 | 站点地图 | 会员注册 | 隐私政策 | 内容指正

联系QQ:先飞电脑技术网站事务联系QQ,点击可以直接留言. 32933427 电话:13710542091 [世界排名] 鄂ICP备05005890号 先飞电脑教程网