版本一

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. HDOJ 1237题 简单计算器

    简单计算器 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  2. HDU 4722 Good Numbers 2013年四川省赛题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4722 题目大意:给定一个区间,求区间中有多少个满足每位上的数的和是10的倍数. 解题思路:先打表暴力求 ...

  3. MIPI DSI协议介绍

    此文根据网上的资料翻译和整理而来 一.MIPI MIPI(移动行业处理器接口)是Mobile Industry Processor Interface的缩写.MIPI(移动行业处理器接口)是MIPI联 ...

  4. Nodejs负载均衡：haproxy，slb以及node-slb - i5ting的个人空间 - 开源中国社区

    Nodejs负载均衡:haproxy,slb以及node-slb - i5ting的个人空间 - 开源中国社区 undefined

  5. JuliaSet&MandelBulb @ Maya&KK —— 4亿粒子的测试

    分形是数学里最美的一个话题之一,美在 无限的细节 在尺寸上的自相似 这两个特征造成的牛逼效果就是随便选择分形上的一个小坑或者小山包拉进后又是一个广阔的世界,而把这个世界中的一个小坑或者小山包拉进又™是 ...

  6. 2013腾讯编程马拉松初赛第一场（3月21日） 湫湫系列故事——减肥记II ----线段树

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4509 虽然制定了减肥食谱,但是湫湫显然克制不住吃货的本能,根本没有按照食谱行动! 于是,结果显而易见… 但 ...

  7. java James

    使用JavaMail发送电子邮件(案例) 需求: 使用JavaMail技术,实现从A账户给B账户发送一封电子邮件,标题为"会议通知",邮件内容为"XX你好!请于明天下午1 ...

  8. 使用PDO连接数据库 查询和插入乱码的解决方法

    问题:PDO连接数据库后,查询和插入中文到数据库,出现乱码,如图: 解决方法: 法1: try{ $opts_values = array(PDO::MYSQL_ATTR_INIT_COMMAND=& ...

  9. uboot中的mmc命令

    一:mmc的命令例如以下: 1:对mmc读操作 mmc read addr blk# cnt 2:对mmc写操作 mmc write addr blk# cnt 3:对mmc擦除操作 mmc eras ...

  10. 3高并发server：多路IO之epoll

     1 epoll epoll是Linux下多路复用IO接口select/poll的增强版本号,它能显著提高程序在大量并.发连接中仅仅有少量活跃的情况下的系统CPU利用率,由于它会复用文件描写叙述符 ...