当输入字段获得焦点时，按钮被输入字段隐藏

Posted 2023-02-22

【中文标题】当输入字段获得焦点时，按钮被输入字段隐藏

【英文标题】：Button gets hidden by an input field when the input field is focused

【发布时间】：2022-01-01 01:39:46

【问题描述】：

所以我有这段代码，只要在旁边的文本框中写入一些文本，我就可以显示一个按钮。为此，我使用引导程序和input-group-append 类。我之前遇到过一些问题，我已经设法解决了其中一些问题，但现在我偶然发现了新的不良行为。也就是说，如果在同一文本字段中写入了某些内容，则文本字段旁边应显示一个按钮。但是，如果我写东西，按钮不会弹出。如果我散焦我的文本字段，则会显示该按钮。再次聚焦，即点击它，按钮再次隐藏，它的行为是这样的。这是我使用的代码：

<div className="input-group" style= position: "relative" >
<input
   type="text"
   className="form-control"
   placeholder="Recipient's username"
   aria-label="Recipient's username"
   aria-describedby="basic-addon2"
   onChange=onChange
   />
showAppend === true && (
<div
className="input-group-append"
style= position: "absolute", right: 0, zIndex: 2 
>
<span className="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)
</div>

这是来自 CodeSandbox 的工作 code。你可以试一试，输入一些东西，散焦->按钮瞧。再次单击输入字段，按钮消失。再次散焦，瞧。 onChange 函数改变showAppend 的值。

那么，如何在input 字段顶部显示此按钮？我尝试添加z-index，但没有成功。

【参考方案1】：

您可以查看我的答案。 我已经通过position: relative 完成了。

<div className="input-group-append" style= position: "relative", right: 0, zIndex: 100  >

【讨论】：

谢谢！这个答案解决了我的问题，@Will Jenkins 的评论也解决了。