怎样做到多行文本框改变大小，但是不影响其他元素的位置

Question

我现在的写法是这样的：
        $(id).focus(function () {
            $(id).attr({ "rows": "5", "cols": "50" });
        });
        $(id).blur(function () {
            $(id).attr({ "rows": "2", "cols": "20" });
        });
这样点击多行文本框的时候，会把整个页面变得很难看，怎么能让它在点击的时候变大，但是不影响其他元素的位置。

Answer 1

加个DIv 指定大小,textarea 改成绝对定位的 ，这样改变大小就不影响其它了

Answer 2

加一个容器，position:relative，textarea position:absolute
 <form id="myForm" action="blank.html" method="post"> 
    Name <br /><input type="text" name="name" /><br />
    Comment<div style="height:80px;position:relative;"> <textarea rows="2" cols="20" id="commet" style="position:absolute;heigth:50px;"></textarea></div>
    <input type="submit" value="Submit Comment" /> 
</form> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script>
    $('#commet').focus(function () {
        $(this).attr({ "rows": "5", "cols": "50" });
    }).blur(function () {
        $(this).attr({ "rows": "2", "cols": "20" });
    });
</script>