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

浏览数：68 / 时间：2015年06月09日

众所周知，各种浏览器对于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>

jQuery_review之一行语句搞定表单焦点样式,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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