textarea失焦时点击按钮无响应问题的解决方案咨询

这个问题我之前踩过坑！核心原因是textarea聚焦后的高度变化导致按钮位置发生了偏移：当你第一次点击按钮区域时，鼠标其实点在了「按钮原来的位置」，但此时textarea因为失焦瞬间收缩高度，按钮被拉回初始位置，这时候你的点击坐标已经没命中按钮了——所以只触发了textarea的失焦，没触发按钮的点击事件，第二次点击时按钮位置稳定，才会触发。

下面给你几个靠谱的解决办法，按优先级排序：

1. 调整布局，让按钮位置不受textarea高度影响（最推荐） #

从根源上解决位置偏移问题，把按钮的位置固定，不和textarea的高度绑定。修改你的CSS：

.wrap {
  position: relative; /* 新增，作为按钮定位的父容器 */
  align-items: center;
  display: flex;
  justify-content: flex-end;
  /* 可以给wrap加个padding-bottom，避免按钮被textarea遮挡 */
  padding-bottom: 60px;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}

.fancy-button {
  position: absolute; /* 固定位置 */
  right: 10px;
  bottom: 10px;
  background-color: red; /* 补全你的样式 */
  /* 其他按钮样式保持不变 */
}

这样不管textarea怎么伸缩，按钮都固定在右下角，点击时不会因为位置变化空点。

2. 用JS延迟textarea的收缩，先触发按钮点击事件 #

如果没法修改布局，可以通过延迟textarea的高度变化，让按钮点击事件先执行：

const textarea = document.querySelector('textarea');
const submitBtn = document.querySelector('.fancy-button');
let blurTimer = null;

// 聚焦时立即展开
textarea.addEventListener('focus', () => {
  clearTimeout(blurTimer);
  textarea.style.height = '150px';
});

// 失焦时延迟收缩
textarea.addEventListener('blur', () => {
  blurTimer = setTimeout(() => {
    textarea.style.height = '40px';
  }, 200); // 延迟时间和你的transition时长对应
});

// 按钮点击时清除延迟，同时执行你的逻辑
submitBtn.addEventListener('click', () => {
  clearTimeout(blurTimer);
  // 这里写按钮的业务逻辑
  console.log('按钮成功触发！');
  // 如果需要，可以手动让textarea收缩
  textarea.style.height = '40px';
});

这个方法的思路是：第一次点击按钮时，先触发点击事件，再让textarea收缩，避免位置偏移干扰。

3. 应急方案：用CSS pointer-events临时屏蔽textarea #

这个方法兼容性稍差，但可以快速应急：

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}

/* 失焦过渡期间，让textarea不拦截点击事件 */
textarea:not(:focus):not(:active) {
  pointer-events: none;
  transition-delay: 0.1s; /* 延迟收缩，给点击事件留时间 */
}

原理是在textarea失焦的过渡阶段，不让它拦截鼠标点击，确保按钮能接收到点击事件。

内容的提问来源于stack exchange，提问作者Jam3sn