如何在鼠标单击时更改文本区域的高度答案

【问题标题】：How to change the height of a Textarea on a mouse click如何在鼠标单击时更改文本区域的高度
【发布时间】：2011-12-11 07:04:56
【问题描述】：

我正在尝试做这样的事情。

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

为此，我制作了一个类似 <a id="expandText" href="#"> Expand </a> 的按钮并添加了以下 javascript

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

我尝试了两件事

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

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

【问题讨论】：

'animate' 正在为我工作……您使用的是哪个浏览器？并且还包括'textarea' html
一个证明它有效的小提琴：jsfiddle.net/dEDfv
“另一个是改变css” - 你能提供给我们相关的CSS吗？
css 文件只包含这个 textarea#id_text {border:none;高度：400px； }

标签： javascript jquery css animation textarea

【解决方案1】：

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

如果是这样，请在您使用的任何浏览器中使用检查元素（如果出现 TinyMCE 上下文菜单，请按住 CTRL 以获取浏览器上下文菜单），然后在编辑器中向下导航，直到找到一个 iframe，这是写作真的发生了。如果我没记错的话，选择器.mceEditor iframe 应该可以。

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

【讨论】：

是的，我正在使用 TinyMCE，非常感谢您提供有关其工作原理的信息。但我还没有真正理解您所说的检查元素是什么意思。你能解释一下我应该怎么做吗
@Sachin 适当浏览器（Opera、Firefox、Safari 或 Chrome）中的右键菜单中有一个名为“检查元素”的元素。右键单击某处并点击它，您将看到浏览器当前正在呈现的实际生成的 DOM（在 JS 修改等之后）。检查 TinyMCE 编辑器内部和旁边的内容，您会明白我的意思 :-)

【解决方案2】：

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

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

当你点击链接时避免链接动作。

编辑：您添加了“this textarea has a class= MCeEditor”，所以我认为您误解了一些东西。您看到的是可编辑的内容（span 或 div），而不是 textarea（实际上是隐藏的）。你需要调整这个元素的大小（也许你应该使用 TinyMCE API 来做到这一点）。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

一切正常。请参阅 JSFiddle http://jsfiddle.net/URkWu/

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

【讨论】：

是的，我在 JSFiddle 进行了检查，它似乎工作正常。这不是 js 的问题，因为另一个 js 代码片段工作正常