版本一

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. Java---网络蜘蛛-网页邮箱抓取器~源码

    刚刚学完Socket,迫不及待的做了这个网页邮箱抓取~~~ 现在有越来越多的人热衷于做网络爬虫(网络蜘蛛),也有越来越多的地方需要网络爬虫,比如搜索引擎.资讯采集.舆情监测等等,诸如此类.网络爬虫涉及 ...

  2. HDOJ/HDU 2535 Vote(排序、)

    Problem Description 美国大选是按各州的投票结果来确定最终的结果的,如果得到超过一半的州的支持就可以当选,而每个州的投票结果又是由该州选民投票产生的,如果某个州超过一半的选民支持希拉 ...

  3. Codevs 3305 水果姐逛水果街Ⅱ 倍增LCA

    题目:http://codevs.cn/problem/3305/  时间限制: 2 s   空间限制: 256000 KB   题目等级 : 钻石 Diamond 题解       题目描述 Des ...

  4. SDN基础理解

    本文转载自:http://blog.csdn.net/freezgw1985/article/details/16873677 个人觉得对很适合对SDN的入门级的概念性理解,先暂时copy一下,等研究 ...

  5. AWK调用SHELL，并将变量传递给SHELL

    在Shell脚本中调用awk是非常自然和简单的,以前还写过一个关于awk/shell相互传递变量的文章:awk与shell之间的变量传递方法在awk脚本中,如果需要调用shell脚本/命令,则需要使用 ...

  6. 什么是staging server

    原文链接:http://blog.csdn.net/blade2001/article/details/7194895 软件应用开发的经典模型有这样几个环境:开发环境(development).集成环 ...

  7. JS时钟钟表

    <!DOCTYPE html> <html>    <head>        <meta charset="utf-8" />   ...

  8. int? 参数是这个的时候 是可以传入null的 而int的就不行

    such as     pager.CurrentPageIndex = (page != null ? (int)page : 1);

  9. c# 的导入功能SqlBulkCopy

    private static void DataTableToSQLServer( DataTable dt) { string connectionString = GetConnectionStr ...

  10. Stream流的读取使用

    这个是在现在的项目里,用到的知识点,一般用不到这些..所以想着还是记下来以后用. 针对文本流 //StreamReader sr = new StreamReader(mystream,Encodin ...