使用Firefox專注後點擊另一個輸入時檢測到

Question

請考慮我有一個包含多行文本的頁面。

當用戶點擊它時，它會變成多個文本輸入，以便他可以修改它。
當他在文本輸入之外單擊時，其被保存並且輸入被文本替換。
但是，如果他點擊另一個文本輸入，我現在不想保存它，所以他不必在一行上點擊多次來修改它。

我能，使用'focusout'事件。我檢測到用戶使用jQuery的e.relatedTarget點擊另一個輸入。

它適用於Chrome，但Firefox不支持良好的焦點。 e.relatedTarget永遠是null

我怎樣才能實現與Firefox類似的東西？

$('input').on('focusout', function(e) { 
 
    if (e.relatedTarget != null) { 
 
    $('#display').html("don't save for now") 
 
    } else { 
 
    $('#display').html("save the inputs"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <input type="text" /> 
 
    </div> 
 
    <div> 
 
    <input type="text" /> 
 
    </div> 
 
</div> 
 
<div id="display"></div>

Answer 1

你是正確relatedTarget是不是在Firefox中是非常有用的。

解決方法是明確檢查哪個元素接收焦點。這不是在圖書館的事件的內容事件（如新的元素並沒有收到焦點還），但它會直接其後是。使用超時0將請求移動到當前執行隊列的末尾將可靠地讓您獲得新聚焦的元素，並檢查它是否是其中一個輸入。

$('input').on('focusout', function(e) { 
 
    setTimeout(function() { 
 
    if ($(document.activeElement).is('input')) { 
 
     $('#display').html("don't save for now") 
 
    } else { 
 
     $('#display').html("save the inputs"); 
 
    } 
 
    }, 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <input type="text" /> 
 
    </div> 
 
    <div> 
 
    <input type="text" /> 
 
    </div> 
 
</div> 
 
<div id="display"></div>