javascript - onFocus时扩展textarea

我有许多textarea字段，我希望它们全部集中时都用尽

这是我的代码的演示：http://jsfiddle.net/PU73y/

问题是，当我单击它们时，它们不会扩展。这是为什么？

谢谢

<textarea id='txt1' class='txt' refID='1' style='height: 15px;'>this is testing of textrea  </textarea>


$(function() {
    $(".txt").focus(function(){
        var element = $(this);
        var refID = element.attr("refID");
    //  alert(refID);

        $('#txt' + refID).focus (function() {
            $('#txt' + refID).animate({
                width: 400,
                height: 200
            }, 1000);
        });

        $('#txt' + refID).blur(function() {
            $('#txt' + refID).animate({
                width: 400,
                height: 20
            }, 1000);
        });
    });
});

最佳答案

http://jsfiddle.net/Y3rMM/

CSS ...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML ...

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery的...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

这样的事情会起作用。