jQuery 焦点/模糊表单，而不是单独的输入

Question

如何通过 jQuery 实现这一点？

当用户单击表单中的任何输入时，它就会获得焦点。当用户从任何输入中单击表单外时，它会变得模糊，但是，在表单本身的输入之间进行 Tab 键切换之间不会触发模糊。

对于这样的事情，我们正在研究这个基本结构:

<form>
<input ... />
<input ... />
<input ... />
</form>

再说一次，假设我单击表单中的任何输入，我们知道表单已获得焦点。接下来，当用户单击任何输入时，仅当我们单击表单外部时才会触发模糊。

我之前曾问过这个问题，并收到了有关如何在表单中的最后一个输入字段模糊时实现模糊效果的输入，但不是来自输入列表中的任何元素。

谢谢，马克·安德森

Answer 1

在输入之间进行 Tab 键切换时的事件顺序:

  Click on input1:  input1 focus

  Clickb on input2: input1 blur
                    input2 focus

  Click outside:    input2 blur

当输入失去焦点时，您需要检查表单中的其他元素是否获得焦点。或者您可以简单地检查事件元素是否仍在表单内:

$('form').on('focusout', function(event) {
    setTimeout(function() {
        if (!event.delegateTarget.contains(document.activeElement)) {
            console.log('Form blur');
        }
    }, 0);
});

JSFiddle

请注意，表单在提交时不会模糊，因此如果您想在模糊和提交时执行相同的操作，则可能需要添加提交处理程序。

还要注意 setTimeout 的使用，这是必需的，因为当元素即将失去焦点时会发出 blur 和 focusout 事件，但是还没有失去它。