第一种：（文本框获取焦点后，它的颜色会有所变化，当失去焦点的时候，恢复为原来的样子）

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

    <style type="text/css">

        input:focus ,textarea:focus{

            border: 1px solid #f00;

            background: #fcc;

        }

    </style>

<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"></textarea>

            </div>

        </fieldset>

    </form>

</body>

</html>

只不过IE中不兼容

第二种IE兼容：

 <html>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <script type="text/javascript" src="jquery-1.11.3.js"></script>

     <style type="text/css">

         .focus{

             border: 1px solid #f00;

             background: #fcc;

         }

     </style>

      <script type="text/javascript">

         $(function(){

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

                 $(this).addClass("focus")

             }).blur(function(){

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

             })

         })

      </script>

 <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"></textarea>

             </div>

         </fieldset>

     </form>

 </body>

 </html>

jquery获取和失去焦点改变样式的更多相关文章

  1. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  2. 问题：关于坛友一个获取text内容并改变样式的实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 1: <!DOCTYPE HTML> 3: <head> "content-t ...

  3. jQuery实现单击某个标签改变样式

    1.HTML代码,如下图: <p class="sc_member_recharge_form"> <span class="selected" ...

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

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调 ...

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

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

  6. jquery的blur之后,focus获取不到焦点的解决办法

    一:很多童鞋可能会遇到这种情况: jquery的blur之后,focus获取不到焦点. 二:使用场景: 用户填写信息的时候,若邮箱为空,则提示 请填写邮箱,并将光标置于填写邮箱的文本框里,方便用户的再 ...

  7. jQuery获取CSS样式中的颜色值的问题

    转自:http://blog.csdn.net/cwj649956781/article/details/23261529 jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法,需 ...

  8. jQuery的input 失去焦点之后，不能再获取到焦点

    今天写了一个字段唯一性校验功能,验证设备仪器编号唯一,当输入编号之后 ,点击其他,失去焦点后,后台验证唯一,有过此编号,就给出提示,重新填写. 当使用ie时候,获取焦点正常 ,但是使用火狐就获取不到焦 ...

  9. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. Linux下卸载ORACLE的多种方法(转)

    第一种# cd /u01/app/oracle/product/11.2.0/client_1/deinstall/ # ./deinstall# rm -rf /u01/app/oracle# rm ...

  2. WebConfig 配置文件详解

    <?xml version="1.0"?><!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual St ...

  3. javascript 的对象

    所有事物都是对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 布尔型可以是一个对象. 数字型可以是一个对象. 字符 ...

  4. Silverlight学习笔记之页面跳转

    在进行项目开发的时候,经常遇到页面之间的跳转,包括silverlight之间以及silverlight和html之间的跳转. silverlight之间的页面跳转包含两点: 1.主窗体和子窗体 用户新 ...

  5. .net 生成缩略图

    public static void CreateSmallImage(string minImageFullPath, System.Drawing.Image originalImage, int ...

  6. 《C++ Primer Plus 6th》读书笔记 - 第十章 对象和类

    1. 过程性编程和面向对象编程 2. 抽象和类 1. 使用类对象的程序都可以直接访问公有部分,但只能通过公有成员函数(或友元函数)来访问对象的私有成员 2. 可以在类声明之外定义成员函数,并使其成为内 ...

  7. 解决Button在IE6、7下的自适应宽度问题

    很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它. 写一个Button,有两种方式:其一,直接button标签:其二,input type=”butt ...

  8. vs2012 发布网站丢失文件

    问题描述 在发布网站时,发现上线的网站总是功能缺失,而本地代码确实没问题. 到发布网站的磁盘去查看,发现丢失了很多静态页面文件. 这是一个很奇怪的问题:mvc的网站,丢失了很多View(大部分的csh ...

  9. Hibernate的Criteria用法

    在hibernate的Session里面使用createCriteria可以创建一个Criteria实例帮助我们进行条件查询,不用自己串hql语句,很方便. 用法很简单,首先传Class实例创建Cri ...

  10. 基于IAP和Keil MDK的远程升级设计

    写在前面:三个周之前,我突然想写一个远程升级的程序.那个时候我只是大概知道IAP的意思是在应用编程,但怎么编,我还一无所知.我给自己定下一个个阶段目标,从最基础的代码一点点写起,解决一个又一个的问题. ...