在 html 文本框中显示提示效果,以方便用户的输入,比如在输入姓名时,会自动提示 姓名长度最多 16 个字符,是不是很酷哦。快来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
完整代码如下:
- <!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>
- html文本框提示效果
- </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>
来源: