以HTML格式向下滑动textarea

Question

我想创建一个包含大量文本输入区域（textarea）的HTML表格，当点击时，向下展开。现在，当textarea元素被点击时，它会很好地扩展，但它会在这个过程中弄乱表格布局。

我想要这样的东西

而不是我现在得到的这个丑陋的东西

Here is my current code

Answer 1

只需切换一个类，而不是手动搞乱CSS值。这使您可以轻松玩绝对定位而无需搞乱JS。请参阅此处的演示：http://jsfiddle.net/8Qa3C/1/

使用：

代替您当前的代码

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
    });
});

然后你就可以得到一些简单的CSS：

.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
}

我还在position: relative;添加了td。

Answer 2

<强> jsFiddle Demo

您应该使用定位来完成此任务。使用position：absolute将从文档流中删除textarea并允许它弹出＆＃34;弹出＆＃34;就像你的GIF动画一样。

为了使定位排成一行，您还需要将td设置为position：relative，以便调整textarea以与td填充对齐。 zindex也有助于将其设置在内容之上。

td > textarea:focus{
 position:absolute;
 top:5px;
 z-index:1;
}
td{
 position:relative;
}

为了增加效果，您可以设置高度变化动画

$(this).animate({height:"150px"});

Answer 3

这与一些动画相同：http://jsfiddle.net/8Qa3C/2/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand').animate({
            height: "150px"});
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand').css({
            height: "20px"});
    });
});

或者你也可以使用过渡：http://jsfiddle.net/yU7ME/1/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
        });
});
.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
    transition: height 0.5s;
}

Answer 4

尝试以下方法 -

的Javascript

$('[id^="txt"]').focusin(function() {
    $(this).addClass("expandtextarea");
});
$('[id^="txt"]').focusout(function() {
    $(this).removeClass("expandtextarea");
});

CSS

.expandtextarea{
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px !important;
    position: absolute;
    margin-top: -12px;
}