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

Question

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

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

但在HTML格式中并非如此：即使点击没有tabindex的元素，我的可聚焦元素也会失去焦点。

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

Answer 1

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

逻辑

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

JSFiddle

代码

＆＃13;

＆＃13;

(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();
})();

＆＃13;

.content {
  margin: 15px;
  background: #ddd;
  border: 2px solid gray;
  border-radius: 4px;
  height: 200px;
  width: 200px;
  padding: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;