页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

javascript写的一个表单动态输入提示的代码

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

姓名：<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />

密码：<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" /> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

比较简单，自己闲着无聊写的，很久没有写过代码了。。。。

Tags：javascript写的一个表单动态输入提示的代码