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

Question

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

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

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

必需的行为 - 是否可以在 HTML 中阻止上述行为？我希望我的元素仅在我单击其他可聚焦元素时失去焦点，例如我上面提到的它在桌面应用程序中的元素。

Answer 1

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

逻辑

• 创建一个全局变量 lastSelectedInput 来存储上次访问的元素的 id。
• 添加一个类来定义边界。
• 在body上添加点击事件，如果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>