javascript - 如何确定焦点何时离开 HTML 表单（即表单的子级不再有焦点）？

Question

例如，我有一个带有 textarea 的 HTML 表单元素和两个按钮作为子元素。我如何检测焦点何时从这三个元素之一转移到这三个元素之一之外的元素。换句话说，我如何检测焦点何时离开表单，以便我可以自动关闭它？

我想我可以使用表单上的 focusout 事件来确定焦点何时不再属于其子元素之一，但是从 focusout 事件似乎无法访问获得焦点的对象，所以我没有办法例如，检查焦点是否只是从文本区域到按钮之一。

relatedObject、fromElement 和 toElement 属性都是未定义的。

Answer 1

虽然我担心这种方法可能会有细微的错误，但这是我所知道的最好的：

• 在表单的focusout事件上注册（不是blur，因为后者不会冒泡）
• 通过 注册一个 0 延迟函数setTimeout，因此处理焦点转移
• 在超时函数中，检查是否document.activeElement是您的表单的后代。如果没有，就开火。

这是一个示例实现：

$('#yourform').on('focusout', function(evt) {
  var self = $(this);
  setTimeout(function() {
    if (self.has($(document.activeElement)).length == 0) {
      alert('leave');
    }
  }, 0);
});

form {
  border: 1px solid red;
  margin: 1em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='yourform'>
  <input type='text'>
  <input type='text'>
</form>


<input type='text'>

Answer 2

正确的名称是“模糊”

function setBlur()
{
   var elements = document.getElementByTagName('input');
   for(var i = 0; i < elements.length; i++)
      elements[i].setAttribute('onfocus', 'callme(this)');
}
function callme(el)
{
   var _id = el.getAttribute('id');
   if(_id != "textarea_id' && _id != "button_1_id" && _id != "button_2_id")
        callYourMethodToHandleFocusOutsideYourForm();
}
body.onload = function() { setBlur(); }

这会成功的

您也可以对 textarea 执行此操作，只需应用document.getElementByTagname('textarea')并遍历数组即可。