时间戳

首页 > 解决方案 > 关闭模式后，如何将焦点返回到单击的交互式元素？反应JS

javascript - 关闭模式后，如何将焦点返回到单击的交互式元素？反应JS

问题描述

单击按钮时，会打开一个模式，一旦模式关闭，焦点应该回到按钮上以实现可访问性。我尝试过使用 ref 和 id。都没有奏效。

Carbon 组件被用于我们直接调用<Modal>标签来创建模态的地方。

标签： javascriptreactjsaccessibilityweb-development-server

解决方案

您需要以某种方式将 OnClick 属性添加到关闭模式的按钮，或添加事件侦听器。

<!-- OnClick Method -->
<h2>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>

或者

<!-- Event Listener Method -->
<h2>Hello</h2>
<button id="close-modal">close</button>
<div>I am a modal</div>
....
<script>
    document.getElementById("close-modal").addEventListener("click", closeModal);
</script>

在连接到 OnClick 或事件侦听器的 JS 函数中，您可以使用 vanilla JS 设置焦点。

  function closeModal(){
     document.getElementById("ID-of-element-needing-focus").focus();
  }

推荐阅读