如果活动文本区域具有可更改焦点大小的 CSS，则单击事件上的按钮不会触发

Question

如果我聚焦文本区域并单击按钮没有操作触发，您可以在代码片段中进行测试，我必须再单击一次

删除焦点样式一切正常。

我能做什么？ 谢谢

textarea:focus{
  height:5rem;
}

<textarea class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea>

<button onclick="alert('ok');">
test
</button>

Answer 1

问题是，当您

onfocus

textarea

时，按钮会移动，这就是按钮不会被单击的原因。

要修复此问题，请使用以下代码：

function ok() {
  document.getElementById("txta").blur() 
  alert("ok")
}

#txta-container {
  min-height: 6rem;
}

textarea:focus {
  height: 5rem;
}

<div id="txta-container">
  <textarea id="txta" class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea>
</div>
<button id="btn" onclick="ok()"> test </button>

Answer 2

简而言之，UI 事件规范 对指针设备的

click

进行了如下解释：

click

事件类型必须在...目标上调度 当用户按下时，由指针指示 并释放主指针按钮....

在您的示例中，我们按下按钮，按钮移动，然后释放其他地方（不在按钮上）。我们不满足发送

click

事件的条件！

理想情况下，UI 元素在交互过程中不应移动。并且，无需在获得焦点时自动调整文本区域的大小；默认情况下，用户已经可以根据自己的喜好调整其大小。

---

如果您想调整其大小，只需

独立于文本区域放置按钮，例如：

.text-box {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: start;
}

textarea:focus{height: 5rem}

<div class="text-box">
  <textarea></textarea>
  <button onclick="alert('ok');">test</button>
</div>

或者

延迟文本区域高度的变化到合理的量。通过 CSS 的示例：

textarea {
  /* Can only transition to/from computable <length>s, meaning:
   * Must be set to a computable <length-percentage>.
   */
  height: 2lh;
  
  transition-delay: 1s;
  transition-property: height;
}
textarea:focus {
  height: 5rem;
  
  /* When :focus, don't delay:
   * This applies the new height immediately.
   */
  transition-delay: 0s;
}

<textarea></textarea>
<button onclick="alert('ok');">test</button>