为啥 jquery.animate 在 textarea 上使闪烁的光标消失？

Posted 2023-05-07

【中文标题】为啥 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 中是这样！

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

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

提前致谢

【参考方案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 禁用了光标......我无法让它工作......所以我暂时不使用你的第一个建议。尽管这不是更好的解决方案，如果没有人回答更好的解决方案，我会接受。感谢您的帮助！