为什么 jquery.animate 在 textarea 上使闪烁的光标消失？答案

【问题标题】：Why jquery.animate on a textarea make the blinking cursor disapears?为什么 jquery.animate 在 textarea 上使闪烁的光标消失？
【发布时间】：2011-02-08 11:03:42
【问题描述】：

我有以下代码

$(document).ready(function() {
    $("#myTextArea").focus(function() {
        $("#myTextArea").animate({ "height": "75px"}, "normal");
        return false;
    });

在获得焦点时展开文本框。扩展发生了，但是闪烁的光标消失了，至少在 Firefox 中是这样！

已编辑：文本区域仍然是焦点，我可以在上面输入。

为什么会这样？有没有办法再次显示？

提前致谢

【问题讨论】：

标签： asp.net javascript jquery textarea cursor

【解决方案1】：

您的 return false 语句正在取消 focus 操作 :) 当元素获得焦点时，您只会得到一个光标，我只是从您的函数中删除这一行。

除此之外，文本区域中的.focus() 不是您可以轻松回收的东西，因为它的位置很重要，您最好在此处坚持更改 CSS：

$("#myTextArea").focus(function() {
    $(this).css({ "height": "75px" });
});

这根本不会影响光标行为并且可以跨浏览器工作（focus 在浏览器中仍然不同），但当然不会动画。另一种选择（我没有在所有浏览器中测试过）是你可以在动画之后用相同的参数再次触发焦点，恢复位置，像这样：

$("#myTextArea").focus(function(e) {
    if($(this).height() == 75) return;
    $(this).animate({ height: 75}, "normal", function() {
        $(this).blur().trigger(e);
    });
});

You can test this from here，请务必检查所有浏览器，因为focus 的行为在它们之间可能略有不同。

【讨论】：

感谢您的回答！但是我认为 textarea 是集中的，因为我可以在上面输入，并且光标永远不会出现。我会尝试这些解决方案并在之后发布一些反馈:)
由于某种原因，是容器 div 的 css 禁用了光标......我无法让它工作......所以我暂时不使用你的第一个建议。尽管这不是更好的解决方案，如果没有人回答更好的解决方案，我会接受。感谢您的帮助！