聚焦时改变尺寸的textarea导致按钮点击事件无法触发求助

问题根源 #

当textarea触发:focus样式改变高度时，页面会立刻发生布局重排，按钮的实际位置被移动了。你第一次点击的是按钮原来的位置，但此时按钮已经不在该位置，所以点击事件没触发；第二次点击对准了按钮新的位置，事件才正常生效。

可行解决方案 #

方案1：让textarea高度保持固定 #

直接给textarea设置和聚焦后一致的最小高度，彻底避免布局变动：

textarea {
  min-height: 5rem; /* 和:focus里的高度匹配 */
}
/* 聚焦时改其他样式做视觉提示即可，比如边框颜色 */
textarea:focus {
  border-color: #2196f3;
  outline: none;
}

方案2：用transform实现高度变化（不触发重排） #

如果一定要保留高度变化的动态效果，用transform代替直接修改height——transform只会触发浏览器重绘，不会改变元素布局流，按钮位置不会偏移：

textarea:focus {
  transform: scaleY(1.5); /* 按比例纵向放大，替代height变化 */
  transform-origin: top center; /* 从顶部开始缩放，避免挤压下方元素 */
}

方案3：给textarea套固定高度容器 #

给textarea加一个固定高度的父容器，这样即使textarea高度变化，也不会影响外部布局：

<div class="textarea-wrap">
  <textarea class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea>
</div>
<button onclick="alert('ok');">test</button>

<style>
.textarea-wrap {
  height: 5rem;
  overflow: hidden; /* 避免textarea超出容器范围 */
}
textarea {
  width: 100%;
  height: 100%;
}
textarea:focus {
  height: 5rem; /* 可按需调整，容器高度固定后不会影响按钮位置 */
}
</style>

内容的提问来源于stack exchange，提问作者gt.guybrush