組類成員的形式元素事件的內容（）

我試圖創建一個觸發時，任何一類元素失去焦點的功能：組類成員的形式元素事件的內容（）

<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'); 
});

，其中用戶可以表單元素和編輯轉移焦點之間，一旦失去類重點任何（和所有）的成員，則函數火災標籤...

來源

2016-12-24 Jim from Princeton

您必須匹配所有元素，請爲您的jQuery選擇器嘗試類似'.timeSetting input，.timeSetting select'。 – PaulBGD

對你有幾點提示：我們創建了一個名爲focusgroup的jQuery插件來完成這個任務。基本原理是監聽焦點事件並檢測何時剩下一個組（「document.activeElement」不再在組中）。關鍵是要觸發自定義事件並聽取他們的意見，例如「groupfocus」和「groupblur」事件代替高級代碼。需要的另一個技巧是在檢測到新的activeElement之前等待模糊事件的1幀。 –

找到並回答了我的問題，並將它更新爲您的HTML。希望它有幫助。聖誕快樂:) –

下面是一個例子基礎上的東西，我寫了幾年前在SO中處理焦點組：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); 
});

現在它只是說明了類變化的焦點，但是你可以很容易觸發自定義事件，並抓住祖先的人。

來源

2016-12-24 21:42:49

我喜歡這種方式，但綁定到'模糊'和'聚焦'導致兩個事件在失去焦點時被觸發（以及模擬焦點）。顯然，我刪除一個，它運作良好;那裏是否提供多種瀏覽器支持？另外，你能告訴我爲什麼我需要兩次點擊一個'select'對象來失去對該對象和相應的div的焦點？ –

@JimfromPrinceton：隨意修改事件。大部分來自記憶。你不應該需要2次點擊，除非可能如果選擇是打開的，所以不得不看一下。應該在所有瀏覽器上工作，因爲我們在生產中使用類似的東西。 –

試試這個：

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

這將選擇任何具有class屬性設置爲任何值的元素中存在的任何輸入。

空字符串：

如果ATTR必須存在&可以有任意數值（或根本沒有）

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); 
});

來源

2016-12-24 19:13:44

這將檢測每個模糊事件。 OP想知道重點何時離開包裝表格的div。 –

這將檢測任何具有class屬性的div中每個輸入的丟失焦點：他說：**並且一旦該類的任何（和所有）成員失去焦點，則該函數將觸發** –

@GoneCoding正確。一旦班級成員失去焦點，我想要執行這個功能。我的第一篇文章寫得不好。 –

組類成員的形式元素事件的內容（）

回答

相關問題