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事件被发出，但并没有失去它。

Answer 2

你可以做这样的事情：

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秒后出现在你的形式没有重点检查。希望这可以帮助。

Answer 3

会$('form').focusin()/focusout()不工作？

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

Answer 4

这是同样的基本思想是阿列克谢的，但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")); 
     } 
    }); 

享受:)