<<锋利的jQuery>>样例改进利用, html文本输入框得到与失去输入焦点的提示信息显示切换函数

该书第二版3.2.10一节中,介绍val()方法时,所用的样例代码是有共性的,而且该样例的场景模式在实际工作中会用到,所以试着优化了一下,写了一个html文本输入框得到与失去输入焦点的提示信息显示切换函数.
原书代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-2-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==this.defaultValue){
                $(this).val("");              // 如果符合条件,则清空文本框内容
            }
      });
      $("#address").blur(function(){          // 地址框失去鼠标焦点
              var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==""){
                $(this).val(this.defaultValue);// 如果符合条件,则设置内容
            }
      })

      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value==this.defaultValue){
                $(this).val("");
            }
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val(this.defaultValue);
            }
      })
  });
  //]]>
  </script>

</head>
<body>
    <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
    <input type="button" value="登录"/>
</body>
</html>

将其中的JavaScript代码改为如下部分:

 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var toggleInputTipOnFocusBlur = function(event){         // 文本框获得鼠标焦点
            if(event.type=="focus" && $(this).val()==this.defaultValue){
        $(this).val("");              // 如果符合输入框内容为提示信息的条件,则清空文本框内容
            }
      else if(event.type=="blur" && $(this).val()==""){
        $(this).val(this.defaultValue);// 如果符合输入内容为空的条件,则设置内容
            }
      };
    $("#address").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);
    $("#password").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);
  });
  //]]>
  </script>

利用函数链和固定函数名toggleInputTipOnFocusBlur,几乎可以无脑拷贝代码完成设置了.

其中要点: 事件处理函数获得的event参数,可以通过其type属性获得事件名称.

时间: 2024-11-05 13:31:50

<<锋利的jQuery>>样例改进利用, html文本输入框得到与失去输入焦点的提示信息显示切换函数的相关文章

聚合函数,分组查询,连接查询综合样例

实比例如以下: update users set classes='1' where id in('u001','u002','u003','u004'); update users set classes='2' where id in('u005','u006','u007'); users表的内容例如以下: +------+-----------+------------+------+-------+---------+ | id | firstname | secondname | a

Android利用Volley异步载入数据完整具体演示样例(二)

MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.os.Bundle; import android.util.LruCache; import android.widget.ImageVie

很好的理解遗传算法的样例

遗传算法的手工模拟计算演示样例 为更好地理解遗传算法的运算过程,以下用手工计算来简单地模拟遗传算法的各    个主要运行步骤.       例:求下述二元函数的最大值: (1) 个体编码           遗传算法的运算对象是表示个体的符号串,所以必须把变量 x1, x2 编码为一种       符号串.本题中,用无符号二进制整数来表示.           因 x1, x2 为 0 ~ 7之间的整数,所以分别用3位无符号二进制整数来表示,将它       们连接在一起所组成的6位无符号二进制

随机森林(原理/样例实现/参数调优)

决策树 1.决策树与随机森林都属于机器学习中监督学习的范畴,主要用于分类问题. 决策树算法有这几种:ID3.C4.5.CART,基于决策树的算法有bagging.随机森林.GBDT等. 决策树是一种利用树形结构进行决策的算法,对于样本数据根据已知条件或叫特征进行分叉,最终建立一棵树,树的叶子结节标识最终决策.新来的数据便可以根据这棵树进行判断.随机森林是一种通过多棵决策树进行优化决策的算法. 2.案例: 图 1 是一棵结构简单的决策树,用于预测贷款用户是否具有偿还贷款的能力.贷款用户主要具备三个

Python Socket 编程——聊天室演示样例程序

上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和client的代码了解主要的 Python Socket 编程模型.本文再通过一个样例来加强一下对 Socket 编程的理解. 聊天室程序需求 我们要实现的是简单的聊天室的样例,就是同意多个人同一时候一起聊天.每一个人发送的消息全部人都能接收到,类似于 QQ 群的功能,而不是点对点的 QQ 好友之间的聊天.例如以下图: 图来自:http://www.ibm.com/developerworks/linux/tu

IronPython 个人网站样例----宝藏挖掘

IronPython for ASP.NET 的 CTP 已经发布两个多星期了,惭愧的是,因为工作繁忙,一直没有太多时间来学习.居然忽略了 Personal Web Site Starter Kit 的 IronPython 样例.幸亏了 Scott Guthrie 这篇博客:http://blog.joycode.com/scottgu/archive/2006/11/18/86737.aspx,才让我发现了这个宝库. 今天下午花了点时间学习了一下,收获不少.记录在这里. IronPython

[持续交付实践] pipelne:pipeline 使用之项目样例

项目说明 本文将以一个微服务项目的具体pipeline样例进行脚本编写说明.一条完整的pipeline交付流水线通常会包括代码获取.单元测试.静态检查.打包部署.接口层测试.UI层测试.性能专项测试(可能还有安全.APP等专项).人工验收等研发测试环节,还会包括灰度发布.正式发布等发布环节. 补充说明:1.此项目的部署还是使用传统虚拟机服务器的方式,暂未采用docker容器,docker容器与pipeline的结合后面会有其他专题进行说明.2.灰度发布.正式发布等发布环节,由于涉及到线上发布系统

最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)

===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例

java多线程样例

这里我们做一个完整的样例来说明线程产生的方式不同而生成的线程的差别: package debug; import java.io.*;import java.lang.Thread; class MyThread extends Thread{ public int x = 0; public void run(){ System.out.println(++x); }} class R implements Runnable{ private int x = 0; public void ru