HTML:如何防止焦点从元素移动

HTML: how to prevent moving focus from element?

本文关键字：元素 移动 焦点 何防止 HTML      更新时间：2023-09-26

我有几个具有tabindex属性的元素。当我点击它们之外的任何页面区域时，它们都会失去焦点。

当前行为-在常规桌面应用程序中，如果某个元素不可聚焦，则单击该元素不会将焦点从先前聚焦的元素移开。

但在HTML中，情况并非如此：即使我单击没有tabindex的元素，我的可聚焦元素也总是失去焦点。

必需行为-是否可以在HTML中防止上述行为？我希望只有当我点击其他可聚焦元素时，我的元素才会失去焦点，比如上面提到的桌面应用程序。

这是一种破解，可以用更好的方式实现。

逻辑

  • 创建一个全局变量lastSelectedInput来存储上次访问的元素的id
  • 添加一个类来定义边界
  • 在主体上添加点击事件，如果event.path不包含边界元素，则调用lastSelectedInput的焦点

JSFiddle

代码

(function() {
  var lastSelectedInput = "";
  function bodyClick(e) {
    var inside = false;
    for (var i in e.path) {
      if (e.path[i].className == "content") inside = true;
    }
    if (!inside) {
      document.getElementById(lastSelectedInput).focus();
    }
  }
  function inputFocus(e) {
    lastSelectedInput = e.target.id;
    e.stopPropagation()
  }
  function registerEvents() {
    document.getElementsByTagName("body")[0].addEventListener("click", bodyClick);
    var inputs = document.getElementsByTagName("input")
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onfocus = inputFocus;
    }
  }
  registerEvents();
})();
.content {
  margin: 15px;
  background: #ddd;
  border: 2px solid gray;
  border-radius: 4px;
  height: 200px;
  width: 200px;
  padding: 5px;
}
<div>
  <div class="content">
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="text" id="txt4">
    <input type="text" id="txt5">
  </div>
</div>

相关文章：