如何在鼠标单击时更改Textarea的高度

Question

我正在尝试这样做。

• 我想在用户点击按钮时增加textarea的高度

为此我创建了一个像<a id="expandText" href="#"> Expand </a>这样的按钮并添加了以下javascript

$('#expandText').click(function () {
    $('#id_text').animate({ height: "1000px" }, 500);
    //$('#id_text').css( "height","+=85" );
});

我尝试了两件事

1. 一个是为文本框的高度设置动画
2. 另一个是改变css，但他们都没有工作

修改 我尝试了下面给出的所有内容，但它仍然无法正常工作。是否可能因为这个textarea有一个class = MCeEditor，这使得这个textarea成为一个编辑器，而不仅仅是一个普通的文本区域

Answer 1

这很奇怪，因为你的代码应该可行。你有什么错误吗？在JS控制台上直接运行$('#id_text').animate({ height: "1000px" }, 500);时它是否有效？还有一件事是你可能想要像这样添加“return false”

$('#expandText').click(function () {
    $('#id_text').animate({ height: "1000px" }, 500);
    return false;
});

以避免点击链接时的链接操作。

编辑：您已添加“此textarea有一个类= MCeEditor ”，所以我认为您误解了一些内容。你看到的是一个可编辑的内容（span或div），而不是textarea（实际上是隐藏的）。您需要调整此元素的大小（可能您应该使用TinyMCE API来执行此操作）。

Answer 2

你说textarea有类MCeEditor - 所以我猜这是TinyMCE或类似的东西。

如果是这样，请在您正在使用的任何浏览器中使用inspect元素（如果出现TinyMCE上下文菜单，按住CTRL键获取浏览器上下文菜单），然后在编辑器中向下导航，直到找到iframe为止写作真的发生了。如果我没有弄错，选择器.mceEditor iframe应该这样做。

所有这些的原因是，TinyMCE隐藏了你的实际文本区域，并自己创建了一个编辑器。当您输入TinyMCE时，它会将该文本放回您的textarea中，以便您可以从服务器端按预期检索它。因此，当您看到MCE编辑器时，您并没有像人们期望的那样直接操纵您的textarea。

Answer 3

我已阅读该文档，您可以使用：

$('#id_text').animate({ height: 1000 }, 500);

Answer 4

工作正常。请参阅JSFiddle http://jsfiddle.net/URkWu/

如果您没有看到文本框动画，请告诉我。