JS文本框增大缩小功能

现在又一个文本域，即textarea，当我双击的时候可以增大其高和宽，再双击的时候又恢复原样。用jquery或javascript如何实现 

解决方案 »

  1.   

    function cl()
    {
    document.getElementById["TextBox1"].style.width="800px"; 
    document.getElementById["TextBox1"].style.height="800px"; 
    }ondblclick 事件
    <input type="text" id ="tt" ondblclick="cl()"/>
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>new document</title>
    </head>
    <body>
    <script>
    function changeSize(txt){
    if(txt.rows == 10){
    txt.rows = 20;
    txt.cols = 60;
    }else{
    txt.rows = 10;
    txt.cols = 50;
    }
    }
    </script>
    <textarea rows="10" cols="50" ondblclick="changeSize(this)"></textarea>
    </body>
    </html>
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>changeTextarea.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function () {
    var locked = true;
    $("textarea").dblclick(function () {
    if (locked) {
    locked = false;
    this.rows = 30;
    this.cols = 50;
    } else {
    locked = true;
    this.rows = 10;
    this.cols = 30;
    }
    });
    });
    </script>
      </head>
      
      <body>
        <textarea rows="10" cols="30"></textarea>
      </body>
    </html>