jQuery 文本框得失焦点的简单实例

版本一

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>

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

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

这是一个简单的逻辑。

赞 (0)

相关推荐

  • textarea焦点的用法实现获取焦点清空失去焦点提示效果

    textarea焦点的用法实现获取焦点清空失去焦点提示效果

    效果图: 具体实现: 1.textarea标签内容 复制代码 代码如下: <span style="font-size:14px;"><tr> <td align="right" valign="top">备注:</td> <td><textarea name="" id="remark" cols="" rows=&qu

  • jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语. <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script>

  • 文本框获得焦点和失去焦点的判断代码

    文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

  • jQuery 文本框得失焦点的简单实例

    版本一 css代码部分: 复制代码 代码如下: .focus {      border: 1px solid #f00;     background: #fcc;} 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body>    <form action="" method="post" id="regForm">        <fieldset&

  • JQuery中使文本框获得焦点的方法实例分析

    本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

  • jQuery文本框得到与失去焦点动态改变样式效果

    jQuery文本框得到与失去焦点动态改变样式效果

    本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { font: nor

  • jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

  • jquery获取复选框的值的简单实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> </style>

  • jquery文本框中的事件应用以输入邮箱为例

    jquery文本框中的事件应用以输入邮箱为例

    文本框中的事件应用:以输入邮箱为例,如图: 代码如下: 复制代码 代码如下: <!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

  • Jquery跨域获得Json的简单实例

    这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.getJSON 最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据.如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=?

  • jquery实现无刷新验证码的简单实例

    1. 思路: 页面上的验证码图片是servlet,采用jquery实现异步校验信息 2. 所用到的文件 VerifyCodeServlet.java   --用于生成图片的servlet ResultServlet.java          --用于校验验证码正确性的servlet verifyCode.js                  --校验的js文件 jquery.js                         --jquery包里的源文件 verifyCode.jsp   

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

随机推荐