Question

我希望扩展textarea（增加高度），只要它具有焦点。扩展时，textarea不应该向下移动内容，而应该显示在其他内容之上。

这是我目前使用的代码（see here for an example）：

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).height(90).css('zIndex', 30000);
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).css('height', 'auto');
    });
});

textarea的扩展工作正常，但我无法将其显示在页面上的其他元素之上（它显示在后面的元素后面）。

是否有任何技巧可以在所有其他元素之上/之前显示扩展的textarea？

更新：这是用于重现问题的（最小）HTML代码：

<div style="height:20px;">first:<br/>
   <textarea id="txt1" rows="1" cols="20"
     style="width: 400px; height: 12px; font-size: 10px;">
   </textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

Answer 1

在position上设置textarea有效。你也可以摆脱z-index。

Working demo

Answer 2

如果元素除静态之外没有z-index，则添加position不会做任何事情。就个人而言，我会添加一个包含所有css更改的类，并包含一个叠加层，如下所示（demo）：

CSS

.focused {
    position: relative;
    height: 90px !important;
    z-index: 1000;
}
.overlay {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: #000;
    opacity: .75;
    filter: alpha(opacity=75);
    z-index: 999;
}

脚本

$(document).ready(function () {
    $('#txt1').focus(function () {
        $('<div class="overlay"/>').appendTo('body');
        $(this).addClass('focused');
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
        $('.overlay').remove();
        $('#txt2').val('blur');
    });
});

Answer 3

尝试设置样式'position：absolute;'在第一个textarea（txt1）上，这应该可以解决问题。

Answer 4

试试这个插件。应该快速而简单：http://unwrongest.com/projects/elastic/

Answer 5

与input和textarea合作，主要是css，jquery用于定位

http://jsfiddle.net/Ap5Xc/

在具有焦点的同时展开textarea（并将其置于前面）

5 个答案: