Javascript 打开焦点时展开文本区域

我有很多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);
        });
    });
});

这是对textrea的测试
$（函数（）{
$（“.txt”）.focus（函数（）{
var元素=$（此）；
var refID=元素属性（“refID”）；
//警报（refID）；
$（'#txt'+refID）.focus（函数（）{
$（'#txt'+refID）.设置动画({
宽度：400，
身高：200
}, 1000);
});
$（'#txt'+refID）.blur（函数（）{
$（'#txt'+refID）.设置动画({
宽度：400，
身高：20
}, 1000);
});
});
});

CSS

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

HTML

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

---

类似的东西可以使用。

您只需使用CSS即可，无需使用JavaScript：

textarea {
    height: 15px;
}

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

请参见

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

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

这项工作：

---

你的问题是你只在第一个焦点之后才在

$（'#txt'+refID）

上创建了侦听器。

我最初投了反对票，因为它没有真正回答他的问题-这是一个嵌套的点击处理程序-投了赞成票，因为我觉得投反对票很糟糕

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