版本一

css代码部分：

.focus {

     border: 1px solid #f00;

     background: #fcc;

}

当焦点获得时，添加focus样式，添加边框，并改背景色为#fcc

html代码部分：

<body>

    <form action="" method="post" id="regForm">

        <fieldset>

            <legend>个人基本信息</legend>

                <div>

                    <label  for="username">名称:</label>

                    <input id="username" type="text" />

                </div>

                <div>

                    <label for="pass">密码:</label>

                    <input id="pass" type="password" />

                </div>

                <div>

                    <label for="msg">详细信息:</label>

                    <textarea id="msg" rows="2" cols="20"></textarea>

                </div>

        </fieldset>

    </form>

</body>

这里有两个input，一个textare框。

:input匹配 所有 input, textarea, select 和 button 元素。

jQuery代码部分：

<script type="text/javascript">

    $(function(){

        $(":input").focus(function(){

              $(this).addClass("focus");

        }).blur(function(){

              $(this).removeClass("focus");

        });

    })

    </script>

用:input匹配所有的input元素，当获取焦点时，就添加样式focus，通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。

版本二：

有时候文本框里有默认的内容，作为提示信息，获取焦点后，要让它消失。可以做如下的改造：

<script type="text/javascript">

    $(function(){

        $(":input").focus(function(){

              $(this).addClass("focus");

              if($(this).val() ==this.defaultValue){

                  $(this).val("");

              }

        }).blur(function(){

             $(this).removeClass("focus");

             if ($(this).val() == '') {

                $(this).val(this.defaultValue);

             }

        });

    })

    </script>

做个逻辑判断，如果值为默认值，就将文本框中的内容清空。

失去焦点，如果文本框中为空，也就是没有输入内容，就将值还设为默认值。

这是一个简单的逻辑。

jQuery之文本框得失焦点的更多相关文章

  1. jQuery 文本框得失焦点应用

    一.文本框得失焦点一种是改变文本框的样式    得到焦点:               失去焦点: 二.文本框得失焦点另一种是改变文本框的值    得到焦点:     失去焦点:       三.jQ ...

  2. jQuery 使得文本框获得焦点

      今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...

  3. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  4. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  5. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  6. JQuery中文本框获取焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是当我 ...

  7. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  8. jQuery清除文本框，内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  9. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

随机推荐

  1. Oracle中trunc函数、round 函数、ceil函数和floor函数的使用

    Oracle中trunc函数.round 函数.ceil函数和floor函数的使用 1.1trunc函数处理数字 trunc函数返回处理后的数值,其工作机制与ROUND函数极为类似,只是该函数不对指定 ...

  2. kafka集群扩容以及数据迁移

    一 kafka集群扩容比较简单,机器配置一样的前提下只需要把配置文件里的brokerid改一个新的启动起来就可以.比较需要注意的是如果公司内网dns更改的不是很及时的话,需要给原有的旧机器加上新服务器 ...

  3. java代码实现对excel加密、解密（设置或去除打开密码）

    使用jxcell组件来完成对excel加密.解密的功能. jxcell.jar[点击下载](此jar没有使用限制,你懂得) 具体代码如下: import java.io.IOException; im ...

  4. ICSharpCode.SharpZipLib压缩解压

    一.使用ICSharpCode.SharpZipLib.dll: 下载地址 http://www.icsharpcode.net/OpenSource/SharpZipLib/Download.asp ...

  5. OC的单例模式的实现

    下面是在ARC,GCD下的单例模式实现: 头文件里申明类方法getInstance: #import <Foundation/Foundation.h> @interface Single ...

  6. 【Linux学习】Linux的文件权限（一）

    Linux操作系统是一个非常优秀的操作系统,同一时候也是一个多用户.多任务的操作系统.那么这就意味着会有非常多的人同一时候使用同一个操作系统的情况. 这时.对于一个用户来说,保护好自己的隐私权就成了一 ...

  7. JBoss 系列十一：JBoss Cluster Framework Demo 介绍

    内容概要 JBoss Cluster Framework Demo包括JGruops.JBossCache.Infinispan,我们在随后的系列中会使用和运行这些示例来说明JGroups.JBoss ...

  8. APP安全环节缺失，手游运营商怎样应对APP破解困境

    2013年手游行业的规模与收入均实现了大幅增长,发展势头强劲.然而,在手游快速发展的同一时候,因为监管.审核等方面存在着漏洞,手机游戏软件被破解后注入恶意代码.盗取用户財产.窃取用户设备信息的现象屡见 ...

  9. Android 仿PhotoShop调色板应用(一)概述

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoSho ...

  10. （转载）Linux下安装配置MySQL+Apache+PHP+WordPress的详细笔记

    Linux下安装配置MySQL+Apache+PHP+WordPress的详细笔记 Linux下配LMAP环境,花了我好几天的时间.之前没有配置过,网上的安装资料比较混乱,加上我用的版本问题,安装过程 ...