Chrome (peut-être Safari?) déclenche" flou " deux fois sur les champs de saisie lorsque le navigateur perd le focus

Ceci est confirmé bogue Chrome. Voir le suivi des problèmes de chrome

La solution de contournement est dans la réponse acceptée.

Ignorer le 2ème flou:

var secondBlur = false;
this.onblur = function(){
    if(secondBlur)return;
    secondBlur = true;
    //do whatever
}
this.onfocus = function(){
    secondBlur = false;    
    //do whatever
}

Ce n'est probablement pas ce que vous voulez entendre, mais la seule façon de le faire semble être de suivre manuellement si l'élément est porté ou non. Par exemple (violon ici):

var blurCount = 0;
document.getElementsByTagName('input')[0].onblur = function(e) {
    if (!e) e = window.event;
    console.log('blur', e);
    if (!(e.target || e.srcElement)['data-focused']) return;
    (e.target || e.srcElement)['data-focused'] = false;
    document.getElementsByTagName('div')[0].innerHTML = (++blurCount + ' blurs');
};
document.getElementsByTagName('input')[0].onfocus = function(e) {
    if (!e) e = window.event;
    console.log('focus', e);
    (e.target || e.srcElement)['data-focused'] = true;
};

Fait intéressant, je n'ai pas pu faire fonctionner cela dans jQuery (fiddle ici)... Je n'utilise vraiment pas beaucoup jQuery, peut-être que je fais quelque chose de mal ici?

var blurCount = 0;
$('input').blur(function(e) {
    console.log('blur', e);
    if (!(e.target || e.srcElement)['data-focused']) return;
    (e.target || e.srcElement)['data-focused'] = false;
    $('div').innerHTML = (++blurCount + ' blurs');
});
$('input').focus(function(e) {
    console.log('focus', e);
    (e.target || e.srcElement)['data-focused'] = true;
});

Vous pouvez également essayer de comparer la cible de l'événement avec document.activeElement. Cet exemple ignorera les événements de flou ALT + tab et le flou événements résultant de cliquer sur Chrome... chrome. Cela pourrait être utile en fonction de la situation. Si l'utilisateur alt + tabs revient dans Chrome, c'est comme si la boîte n'avait jamais perdu le focus (fiddle).

var blurCount = 0;
document.getElementsByTagName('input')[0].onblur = function(e) {
    if (!e) e = window.event;
    console.log('blur', e, document.activeElement, (e.target || e.srcElement));
    if ((e.target || e.srcElement) == document.activeElement) return;
    document.getElementsByTagName('div')[0].innerHTML = (++blurCount + ' blurs');
};​
​

Je suis sur la version Chrome 30.0.1599.101 m sur Windows 7 et ce problème semble avoir été corrigé.

Je vis la même chose et les messages ci-dessus ont un sens quant à pourquoi. Dans mon cas, je voulais juste savoir si au moins un événement de flou s'était produit. En conséquence, j'ai trouvé que le simple retour de ma fonction de flou résolvait mon problème et empêchait l'événement suivant de se déclencher.

   function handleEditGroup(id) {
        var groupLabelObject = $('#' + id);
        var originalText = groupLabelObject.text();

        groupLabelObject.attr('contenteditable', true)
            .focus().blur(function () {
                $(this).removeAttr('contenteditable');
                $(this).text($(this).text().substr(0, 60));

                if ($(this).text() != originalText) {
                    alert("Change Found");
                    return; //<--- Added this Return.
                }
            });
    }

On dirait qu'une bizarrerie d'angularjs donne une solution plus simple lors de l'utilisation de ng-blur; l'objet $ event n'est défini que si vous le transmettez:

ng-blur="onBlur($event)"

Donc (si vous n'utilisez pas ng-blur sur la fenêtre) vous pouvez vérifier:

$scope.onBlur = function( $event ) {
    if (event != undefined) {
       //this is the blur on the element
    }
}