Question

我有多个textarea文件，我希望它们在聚焦时全部显示

问题是我们点击它们时它们不会扩展。那是为什么？

由于

<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);
        });
    });
});

Answer 1

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);
});

这样的东西会起作用。

Answer 2

您可以使用CSS执行此操作，无需使用JavaScript：

textarea {
    height: 15px;
}

textarea:focus {
    height: 200px;
    width: 400px; 
}

请参阅Fiddle

Answer 3

http://jsfiddle.net/PU73y/3/

您在初始焦点处理程序中设置了第二个焦点处理程序，因此您需要再次单击以触发该处理程序。我在这个小提琴中做的就是删除内部处理程序：

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


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


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

Answer 4

这有效：http://jsfiddle.net/PU73y/4/

您的问题是您在第一个焦点之后仅在$('#txt' + refID) 上创建了听众。

onFocus时展开textarea

4 个答案: