jQuery_review之一行语句搞定表单焦点样式

最新推荐文章于 2021-01-02 04:38:30 发布

陈字文

最新推荐文章于 2021-01-02 04:38:30 发布

阅读量1.3k

点赞数

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38092377

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
      $(function(){
            $("input[type='text']").focus(function(){
              $(this).addClass("onfocus");
          }).blur(function(){
              $(this).removeClass("onfocus");
          });
      });
  </script>
  <style type="text/css">
      input.onfocus{
          border:solid red 2px;
          background-color:grey;    
      }
  </style>
  </head>
  <body>
      <form action="#" method="get">
          <label for="name">name:</label>
              <input type="text" name="name"><br/>
          <label for="address">address:</label>
              <input type="text" name="address"><br/>
          <label for="email">E-mail:</label>
              <input type="text" name="email"><br/>
          <label for="qq">QQ:</label>
              <input type="text" name="qq"><br/>
          <input type="button" value="submit"><br/>
      </form>
  </body>
</html>

陈字文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_review之一行语句搞定表单焦点样式

众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用。 $(function(){ $("input[type='text']").focus
复制链接

扫一扫