javascript - focusout() 的组类成员表单元素

Question

我正在尝试创建一个在任何类元素失去焦点时触发的函数:

<h5>ON Time</h5>
<div class = 'timeSetting'><form id = 'weekendStart'>
<input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onHour' value='6' name = 'value' min='1' max='12'><input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onMinute' value='30' name = 'value' min='0' max='59'>
<select id = 'weekendStartAmPm'>
<option value = 'weekendStartAm'>am</option>
<option value='weekendStartPm'>pm</option>
</select>
</form></div>
<h5>OFF Time</h5>
<div class = 'timeSetting'><form>
<input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onHour' value='10' name = 'value' min='1' max='12'><input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onMinute' value='00' name = 'value' min='0' max='59'>
<select id = 'weekdayStartAmPm'>
<option value='wkdayStartPm'>pm</option>
<option value = 'wkdayStartAm'>am</option>
</select>
</form></div>

我知道这不对，但我想要类似的东西:

$('.timeSetting').focusout(function(){
    console.log('lost focus');
});

用户可以在表单元素之间进行切换并编辑转移焦点，一旦类的任何(和所有)成员失去焦点，该函数就会触发...

Answer 1

这是一个基于我几年前写的用于处理焦点组的示例:http://jsfiddle.net/TrueBlueAussie/0y2dvxpf/6/

$('div.timeSetting').on('focus focusin', 'input,select', function() {
  var $editor = $(this).closest('.timeSetting');
  $editor.addClass("focused");

}).on('blur focusout','input,select', function() {
  var $editor = $(this).closest('.timeSetting');
  // wait for the new element to be focused
  setTimeout(function() {
    // See if the new focused element is in the editor
    if (!$.contains($editor[0], document.activeElement)) {
      $editor.removeClass("focused");
    }
  }, 0);
});

目前，它只是说明了类更改的焦点，但您可以轻松地触发自定义事件并捕获祖先上的事件。