jQuery_review之textarea的放大和缩小的jQuery实现

最新推荐文章于 2024-04-29 07:30:04 发布

陈字文

最新推荐文章于 2024-04-29 07:30:04 发布

阅读量2.8k

点赞数

分类专栏： JavaScript相关

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

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!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!='button'],textarea").focus(function(){
              $(this).addClass("onfocus");
          }).blur(function(){
              $(this).removeClass("onfocus");
          });
          
          $(".opeTextArea").toggle(function(){
              $(this).text("max");
              $("textarea").width(400).height(120);
          },function(){
              $(this).text("min");
              $("textarea").width(200).height(60);
          });
      });
  </script>
  <style type="text/css">
      .onfocus{
          border:solid red 2px;
          background-color:grey;    
      }
      textarea{
          width:200px;
          height:60px;
      }
      .resumeContainer{
          width:200px;
      }
      .opeTextArea{
          color:white;
          background-color:black;
          margin:2px;
          padding: 2px 6px;
      }
  </style>
  </head>
  <body>
      <form action="#" method="get">
          <label for="name">name:</label>
              <input type="text" name="name"><br/>
          <label for="password">password:</label>
              <input type="password" name="password"><br/>
          <label for="qq">QQ:</label>
              <input type="text" name="qq"><br/>
          <label for="resume">resume:</label>
          <div class="resumeContainer">
              <span class="opeTextArea">min</span>
                  <textarea rows="3" cols="10"></textarea>
          </div>
          <input type="button" value="submit"><br/>
      </form>
  </body>
</html>

陈字文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery_review之textarea的放大和缩小的jQuery实现

众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用，这个如果添加动画效果会更好，jQuery所有的动画效果都是可以通过animate函数来实现。 $(functi
复制链接

扫一扫