html textarea 中添加按钮,html – 按住textarea焦点时按钮不单击

我认为问题是当你点击时,按钮在技术上不在这个地方,而只是在视觉上.如果添加一个覆盖所有空间的包装器,您可以从第一次捕获单击.

当您进行快速转换时,浏览器正在计算和更新按钮的位置;因此,您的点击位于按钮区域之外.

您可能还注意到,在此解决方案中,如果单击按钮下方,则可能由于相同原因而未触发警报.包装纸的高度迅速下降,咔哒声可能在外面.

.wrap {

display: flex;

}

textarea {

height: 40px;

width: 100%;

transition: height .2s ease;

}

textarea:focus {

height: 150px;

}

.wrap > div {

display: flex;

align-items:center;

}

.fancy-button {

background-color: red;

cursor: pointer;

margin-left: 20px;

height: 30px;

width: 30px;

}

如果您只减少转换时间,您也可以第一次捕获点击：

.wrap {

display: flex;

align-items: center;

}

textarea {

height: 40px;

width: 100%;

transition: height 2s ease;

}

textarea:focus {

height: 150px;

}

.fancy-button {

background-color: red;

cursor: pointer;

margin-left: 20px;

height: 30px;

width: 30px;

}

您还可以保持持续时间并添加延迟：

.wrap {

display: flex;

align-items: center;

}

textarea {

height: 40px;

width: 100%;

transition: height .2s ease;

transition-delay:0.1s;

}

textarea:focus {

height: 150px;

transition-delay:0s;

}

.fancy-button {

background-color: red;

cursor: pointer;

margin-left: 20px;

height: 30px;

width: 30px;

}