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

<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. SOA架构有基本的要求

    SOA在相对较粗的粒度上对应用服务或业务模块进行封装与重用: 服务间保持松散耦合,基于开放的标准, 服务的接口描述与具体实现无关: 灵活的架构 -服务的实现细节,服务的位置乃至服务请求的底层协议都应该 ...

  2. c# 校验文本框的正则

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 #region ...

  3. C#实现MD5字符串加密

    public string Md5Encrypt(string str, string str2) { byte[] result = Encoding.Default.GetBytes((str+s ...

  4. 第003篇 深入体验C#项目开发(二)

    下半本的5个项目也看完了,还是跳着看,只看大概!        第6章 企业交互系统            作者入职一年,开始带新的2个实习生的项目!一个外资企业内部的OA交互系统,这次又是一个基于w ...

  5. 触碰jQuery：AJAX异步详解（转）

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  6. 万事开头难——Cocos2d-x学习历程(一)

    万事开头难,不知该从哪里开始,不过既然要学习一样新东西,那就从了解它开始吧... Cocos2d-x是一个通用平面游戏引擎,基于一个同样十分著名的游戏引擎Cocos2d-iPhone设计,Cocos2 ...

  7. Linux下Matlab崩溃的解决方法

    猜想主要是因为图形显示用了OpenGL加速造成不稳定. 我的运行环境是: Ubuntu 10.04 LTS 64bit Matlab R2010b 解决方法是启动时用: $MATLAB_DIR/bin ...

  8. 多个DLL合并，DLL合并到EXE

    1:) 下载 http://download.microsoft.com/download/1/3/4/1347C99E-9DFB-4252-8F6D-A3129A069F79/ILMerge.msi ...

  9. python运维开发(六)----模块续

    内容目录 反射 模块 os模块 sys模块 md5加密模块 re正则匹配模块 configparse模块 xml模块 shutil模块 subprocess模块 反射 利用字符串的形式去对象(模块)中 ...

  10. VS2015中使用Git

    10分钟学会在VS2015中使用Git 写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微 ...