为什么jquery.animate上一个textarea使闪烁的光标在前看不见？ [英] Why jquery.animate on a textarea make the blinking cursor disapears?

问题描述

我有以下的code

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

拓展一个文本框，当它获得焦点。在展开时，但是闪烁的光标在前看不见，至少在Firefox！

to expand a textbox when it gets focus. The expand occurs, however the blinking cursor disapears, at least in Firefox!

编辑：textarea的仍专注，我可以键入它

Edited: The textarea is still focused, and i can type on it.

为什么会出现这种情况？有没有一种方法来再次显示它？

Why does this happen? Is there a way to show it again?

在此先感谢

推荐答案

您返回false 语句被取消焦点行动:)你只有当元素​​集中获得一个光标，我刚刚从你的函数删除此行。

Your return false statement is cancelling the focus action :) You only get a cursor when the element is focused, I'd just remove this line from your function.

除此之外，。重点（）在文本区域是不是你可以很容易地回收，因为它有这样的重要位置，你最好这里有一个CSS改变坚持：

Aside from that, .focus() in a text area isn't something you can reclaim easily, because it had a position that matters, you're better off sticking with a CSS change here:

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

这根本不​​会影响光标的行为和工作saema跨浏览器（焦点仍是浏览器之间的不同），但当然不会动画。另一种方法（我还没有在所有的浏览器测试这）是，你可以用动画后同样ARGS再次触发的焦点，恢复的位置，像这样的：

This won't affect cursor behavior at all and work the saema cross browsers (focus is still different amongst browsers), but of course won't animate. The alternative (I haven't tested this in all browsers) is that you could trigger the focus again with the same args after the animate, restoring the position, like this:

$("#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, just be sure to check all browsers, as focus behavior can vary slightly between them.

这篇关于为什么jquery.animate上一个textarea使闪烁的光标在前看不见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！