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

<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. 关于Windows的139和445端口

    上次的月赛中,遇到了一个经典的MS08-067的漏洞,这是一个经典的教科书的漏洞.但是仅限于使用metasploit来攻击这个漏洞.现在我想简单写一些关于139和445端口的东西. 首先提到的是Net ...

  2. ISG2015

    一天的成果. Re300 是男人就下一百层 一个64位的程序,放到IDA里的话,IDA就会分析不动,这样就把人给下着了.objdump –d re300 > output,这样拿到汇编代码,大概 ...

  3. UVA 10954 Add All

    题意: 给出n个数,要将n个数相加,每次相加所得的值为当次的计算量,完成所有的求和运算后,要求总的计算量最小. 分析: 直接一个优先队列,由小到大排序,每次前两个相加就好. 代码: #include ...

  4. Android自定义工具类获取按钮并绑定事件（利用暴力反射和注解）

    Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListe ...

  5. windows下 Python 安装包的配置

    1.下载安装 Pythonpython-2.7.2.msi  http://www.python.org/download/如下载 Python 2.7.2,安装目录为 C:\Python27 2.添 ...

  6. Missing Number, First Missing Positive

    268. Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find th ...

  7. 搜索+剪枝——运筹帷幄 (road.cpp)

    运筹帷幄 (road.cpp) [题目描述] 刘邦军行至迷糊林,见其中瘴气围绕,又有青狼猛虎之兽,难于前行. 已知迷糊林是一个共有n个结点的图,点与点之间共有m条道路相连接,每条路有参数t,c,分别表 ...

  8. Android _优雅实现元素间的分割线 （支持3.0以下）

    转:http://blog.csdn.net/lmj623565791/article/details/42407923 1.概述 话说,随着Android SDK版本的升级,很多控件增加了新的属性方 ...

  9. windows下安装NodeJs

    1.官网(//nodejs.org/en/)下载系统匹配的文件 2.双击安装,完成后发现nodejs文件夹下面有npm, 直接用npm安装其他环境既可 3.如果配置了环境变量,直接Win+R后CMD调 ...

  10. skynet的流程1

    logpath = "."harbor = 1address = "127.0.0.1:2526"master = "127.0.0.1:2013&q ...