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

<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. 响应式布局之BootStrap

    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...

  2. 向PHP语言进发

    在做了几个月的.NET技术之后,我决定转去做PHP开发!人家都说,一言通,多言通!努力吧!

  3. 【27前端】CSS Reset

    CSS reset就像是一种宁可错杀三千不可放过一个的做法. 一个最简单粗暴的css reset解决方案 *{ margin:0; padding:0; } 多余的话我就不再累赘,想要更多可以参考我的 ...

  4. C#5 复习总结循环 迭代和穷举

    一.章节复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环 ...

  5. zoj1093 Monkey and Banana

    写到现在,发现1025,1076之前写的都是同一种题型:关于DAG的最长路(最短路). 首先要建立模型,根据关系,确定点和点之间的关系,构成一个DAG,前面几道题每个点之间距离默认为1,这一道题不同点 ...

  6. 代码编辑器的最终选择Sublime Text 2

    对于程序员,不是每一种语言都有很好的代码编辑器,VS这样的编辑环境+编译器也不能适合所有的语言,同时VS占用内存量很大,开几个VS,计算机就开始有点吃不消了.所以简便的代码编辑器很重要. 再Windo ...

  7. Android ListView滑动底部自动加载更多

    直接上代码: // lv = (ListView) findViewById(R.id.lv); // // for(int i = 0;i < 50;i++){ // ls.add(" ...

  8. 用include（）和ob_get_contents( )方法 生成静态文件

    1. 生成静态文件可以在打开缓冲区的前提下,用include()方法去包含要执行的动态文件,这样该动态文件就会在缓冲区中执行,执行完毕后的静态HTML代码就保存在缓冲区中,然后用ob_get_cont ...

  9. List和Tuple类型

    list列表,list是一种有序的集合,可以随时添加和删除其中的元素,L=[]   索引从0开始,第一个元素的索引是0,第二个是1,倒数第一个是-1,倒数第二个是-2,以此类推,使用索引,不要越界   ...

  10. 使用SecureCRT网络连接树莓派

        为了更加方便可以通过网络来连接.控制树莓派,使用SecureCRT可以通过网络来连接树莓派.     1.在树莓派上通过终端命令ifconfig 来查看当前树莓派的IP地址:     IP地址 ...