当文本区域具有焦点时展开文本区域（并将其置于前面）

发布于 2024-11-05 11:39:05 字数 848 浏览 1 评论 0原文

我想扩展一个文本区域（增加高度），只要它具有焦点。展开时，文本区域不应向下移动内容，而应显示在其他内容之上。

这是我到目前为止使用的代码（参见此处的示例）：

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

文本区域的扩展有效很好，但我无法让它显示在页面上其他元素的上方（它显示在后面的元素后面）。

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

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

原文

I want to expand a textarea (increase the height) as long as it has the focus. When expanded, the textarea should not move the content down, instead it should be displayed above the other content.

This is the code I'm using so far (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');
    });
});

The expanding of the textarea works fine, but I can't get it to display above the other elements on the page (it is displayed behind the elements which follow).

Are there any tricks to show the expanded textarea above/in front of all other elements?

Update: this is the (minmal) HTML code used to reproduce the problem:

<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"/>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昔日梦未散 2024-11-12 11:39:05

在 textarea 上设置 position 有效。您还可以去掉 z-index。

工作演示

回复收藏 0 原文

浸婚纱 2024-11-12 11:39:05

如果元素没有除静态之外的位置，添加z-index不会执行任何操作。就个人而言，我会添加一个包含所有 css 更改的类并包含一个覆盖层，如下所示（演示):

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

Adding a z-index does nothing without the element having a position other than static. Personally, I would add a class with all of the css changes and include an overlay, like this (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;
}

Script

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

回复收藏 0 原文