javascript – 展开textarea(并将其置于前面),同时具有焦点

我想扩展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的扩展工作正常,但我不能让它显示在页面上的其他元素之上(它显示在后面的元素后面).

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

更新：这是用于重现问题的(最小)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"/>

解决方法:

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

Working demo

标签：jquery,javascript,textarea,z-index
来源： https://codeday.me/bug/20190716/1482948.html