HTML: 如何防止焦点从元素中移开？

Question

我有多个带有tabindex属性的元素。当我点击页面上它们以外的区域时，它们会失去焦点。

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

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

所需行为 - 是否可以防止上述HTML行为？ 我希望我的元素仅在我点击其他可聚焦元素时才失去焦点，就像我上面提到的桌面应用程序一样。

- troorl

---

看起来很奇怪，你能放上代码吗？@troorl - Himesh Aadeshara

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>

- Rajesh

---

这将恢复焦点到先前的元素（有明显的闪烁），而不是防止焦点。 - Chris Calo