jQuery焦点/模糊形式,而不是个人输入

Question

怎么可以通过jQuery实现？

当用户点击表单中的任何输入时,它会被聚焦.当用户从任何输入中单击窗体时,它会变得模糊,但是,在窗体本身的输入之间的选项卡之间不会触发模糊.

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

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

再说一次,让我说我点击表单中的任何输入,我们知道表单是重点.接下来,当用户点击任何输入时,仅当我们在表单外部单击时才会触发模糊.

我之前已经问过这个问题,并且在表格中的最后一个输入字段模糊但不是来自输入列表中的任何元素时,如何获得有关如何实现模糊效果的输入.

谢谢,马克安德森

Answer 1

当您在输入之间进行选项卡时的事件序列:

  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当元素即将失去焦点事件发出,但并没有失去它.