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个事件，但尚未丢失它。

Answer 2

会$('form').focusin()/focusout()不起作用吗？

http://api.jquery.com/focusout/

Answer 3

这是与Alexey相同的基本思想，但对于jQuery 1.7+，至少在我看来，它更具可读性，因为它将所有内容保持在同一个处理程序中：

    $("#myform").on("focusout focusin", "input", function(e){
        if ( e.type == "focusout" ) {
            $("#myform").attr("form-blur-timeout", window.setTimeout(function(){
                console.log("you've left the form!");//do stuff here
            }, 100));
        } else {
            window.clearTimeout($("#myform").attr("form-blur-timeout"));
        }
    });

享受：）

Answer 4

你可以这样做：

var check;

$('form input').focus(function()
   {
    clearInterval(check); // remove setinterval if any
    // do something because the form is being used
   });

$('form input').blur(function()
{
    check = setInterval(function()
    {
        // do something because the form is not being used
    },500); // half-second delay
});

这不是最性感的解决方案，但会在0.5秒后检查表单中是否没有焦点。希望这会有所帮助。

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

4 个答案: