文本框输入右侧提示文字表单效果

发布时间：2014-08-20 09:38:23　来源/作者：学技巧网页制作　分类：表单按钮阅读：0次点评一下

<html> <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()">

(www.xuejiqiao.com)提示：可修改后再运行代码!

文本框输入操作时显示密码强度或限制提示特效分享给大家值得收藏的一个文本框提示文字表单效果，通常用于限制密码长度、姓名长度等提示特效

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！