Question

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

O(N log N)

我知道这不对，但我喜欢这样的东西：

<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>

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

Answer 1

试试这个：

$("[class] input").focusout(function(){
    console.log('lost focus');
});

这将选择任何元素中存在的任何输入，其中class属性设置为任何值。

空字符串：

如果attr必须存在＆amp;可以有任何价值（或根本没有）

jQuery("[href]");

编辑但是如果你想检测焦点从带有class1的div到带有class2的另一个div的那一刻，你可以使用它：

var currentClass = false;
var leftClass = false;
$("[class]").focusout(function(){
    leftClass = $( this ).attr('class');
    console.log('lost focus ' + leftClass);
});

$("[class]").focusin(function(){
    currentClass = $( this ).attr('class');

    if(leftClass && leftClass != currentClass) {
        // Put your code here
        console.log(" div left " + leftClass);
    }
    console.log('in focus ' + currentClass);
});

Answer 2

这是一个基于我几年前写的东西来处理焦点小组的例子：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);
});

现在它只是通过类更改来说明焦点，但您可以轻松触发自定义事件并捕获祖先的那些事件。

用于focusout（）的组类成员表单元素

2 个答案: