4

我正在使用 Web 应用程序，我想在 textarea 获得焦点时使用动画效果调整 textarea 的大小（平滑调整大小）。

我尝试使用以下代码在焦点增益上调整 textarea 的大小，但它不能平滑地调整大小。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type='text/javascript'>
         function abc()
         {
           $('#txt').attr('rows',15);
         }
    </script>
</head>
<body>

<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>

</body>
</html>
4

5 回答 5

10

如果您不需要对 IE9 及更早版本的支持，纯 CSS 可以解决您的问题。

#txt {
    height:80px;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
#txt:focus {
    height:300px;
}

http://jsfiddle.net/MHC8T/

于 2013-10-10T19:10:32.737 回答
2

尝试这个：

function abc()
{
       $('#txt').animate({'height':"+=100px"}, 400);
}

您可以将高度切换为您想要的任何高度.. +=100是相对的，会将 100px 添加到 textarea 的高度

也作为外部事件处理程序

$("#txt").bind("focusin",function abc(){
       $('#txt').animate({'height':"+=100px"}, 400);
});

希望有帮助

于 2013-10-10T19:01:01.217 回答
1

尝试这个...

$('#txt').focus(function() {
    $('#txt').animate({
        width: 500,
        height: 200
  }, 1000);
});

$('#txt').blur(function() {
    $('#txt').animate({
        width: 160,
        height: 48
  }, 1000);
});

示例：http: //jsfiddle.net/FMp4a/

有关 $.animate() 的更多信息，请参阅 jQuery API 文档中的此页面...

http://api.jquery.com/animate/

于 2013-10-10T19:05:17.453 回答
0

尝试这个

 $('textarea.expand').focus(function ()
          {
               $(this).animate({ height: "4em" }, 500); 
          });

for more information check 

  "http://jsfiddle.net/Y3rMM/"
于 2013-10-12T17:29:14.640 回答
0

我想出了一个不同的答案，这样它会自动调整到文本区域中内容量的大小而不是固定高度

$('#txt').focus (function() {
    $(this).animate({
        height: $(this)[0].scrollHeight 
  }, 200);
});

$('#txt').blur(function() {
  $('#txt').animate({
    height: 40
  }, 200);
});

示例：http: //jsfiddle.net/FMp4a/10/

于 2015-05-13T20:23:24.840 回答