使用 jquery 的 animate 后无法将文本区域大小调整回原始大小

Cannot resize textarea back to original size after using jquery's animate?

本文关键字：区域 调整 原始 文本 jquery animate 使用      更新时间：2023-09-26

简单的问题，但我无法弄清楚这里发生了什么。

我有一个textarea，当用户单击它时，我会展开它。扩展工作正常。但是，在展开后，我无法使用鼠标将其大小调整回原始大小，我只能将其大小调整回animate后停止的尺寸

文本区域 

<textarea placeholder="Click me!"></textarea>

法典

myTextArea.on('click', function() {
  myTextArea.animate({
    'height': '150px'
  }, 'slow'));

这是一个小提琴，显示了实际问题

考虑到可能以某种方式min-height属性被 animate 方法(或其他东西(破坏了，我尝试在 animate 之后手动重置它

myTextArea.on('click', function() {
  myTextArea.animate({'height': '150px'}, 'slow');
  myTextArea.css('min-height': '10px');
);

但可惜，没有运气。有人知道我哪里做错了..？

当且仅当用户已使用拖动处理程序调整其大小时，它才能调整回原始最小高度。

没有用于处理文本区域大小调整的事件。没有办法用.trigger()来模拟它。用户必须这样做，仅此而已。

这似乎是文本区域的已知问题。您可以通过检查文本区域的style.width和style.height属性来检测用户是否已执行此操作，但不能使用传统事件强制其按所需方式运行。

如果您确实需要此功能，请尝试调整大小插件。它使用自己更强大的处理程序覆盖默认的文本区域调整大小函数。您还可以使用类似的想法创建自己的调整大小处理程序。

试试这个：在CSS中，我们使用,而不是:。

	  $('textarea').animate({'height':'150px'}, 'slow');
        var  minheight = parseInt($('textarea').css('min-height'));
        console.log(minheight);
  	$('textarea').on('click', function() {
  		  	       $(this).animate({'height': '100px'}, 'slow');
	              $(this).css('min-height',minheight+'px');
  	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Click me!"  style="min-height:20px;"></textarea>

相关文章：