这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面的代码实现当用户停留在 text 输入框的时候提示输入什么的提示信息,提高用户粘合度。
在输入文本框内容时,有时候需要提示用户输入的内容,为了更友好的提示用户,我用 js 写了一种方法,当点击文本框时,在文本框右边提示用户要输入的信息。
在输入内容前,显示如图 1 所示
图 1
当用户名的文本框或得焦点时,效果如图 2 所示
图 2
当密码文本框或得焦点时,效果如图 3 所示
图 3
演示的源代码如下:
[Ctrl+A 全选 注:
- <!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=gb2312" />
- <title>
- tt控件演示
- </title>
- <script language="javascript">
- //tipTxt要显示的内容,apos向右移动的距离,vpos向下移动的距离
- function tip(tt, tipTxt, apos, vpos) {
- if (apos == undefined) {
- var apos = 0;
- }
- if (vpos == undefined) {
- var vpos = 0;
- }
- var dads = document.all.tipDiv.style;
- dads.display = "block";
- var th = tt;
- var ttop = tt.offsetTop - tt.clientHeight + vpos; //TT控件的定位点高
- var thei = 20; //TT控件本身的高
- var tleft = tt.offsetLeft;
- var tleft = tt.offsetLeft + tt.offsetWidth + apos;
- var twidth = 100;
- var ttyp = tt.type;
- while (tt = tt.offsetParent) {
- ttop += tt.offsetTop;
- tleft += tt.offsetLeft;
- }
- dads.top = ttop + thei + 6;
- dads.left = tleft;
- dads.width = twidth;
- document.all.taemTip.innerHTML = "<font color='red'>" + tipTxt + "</font>";
- }
- function notTip() {
- var dads = document.all.tipDiv.style;
- dads.display = "none";
- }
- </script>
- </head>
- <body>
- <form action="" method="get">
- <blockquote>
- <blockquote>
- <p align="center">
- 【提示控件演示】 用户名:
- <input name="dd" onblur="notTip()" type="text" onfocus="tip(this,'可输入用户名或邮箱')"
- />
- <br>
- 密码:
- <input name="dd" onblur="notTip()" type="text" onfocus="tip(this,'请输入密码')"
- />
- <br>
- </p>
- </blockquote>
- </blockquote>
- </form>
- <div>
- <table width="100%" border="0" cellpadding="4" cellspacing="1">
- <tr>
- <td width="100%" height="25">
- <div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0420/286041.html