Comment devrais-je déclencher l'événement de flou Javascript après l'événement click qui provoque le flou?

Question

J'ai rencontré ce problème plusieurs fois et je ne suis pas satisfait des solutions que j'ai déjà utilisées.

J'ai une boîte de saisie avec un flou qui en valide le contenu et un bouton qui va remplir la boîte de saisie en cliquant sur. Le problème est de cliquer sur le bouton qui déclenche l'événement de flou d'entrée, puis sur l'événement de clic sur le bouton, de sorte que le contenu inséré par le bouton n'est pas ce qui est validé.

Voir http://jsfiddle.net/jakecr/dL3K3/

Je sais que c'est le comportement correct, mais je ne peux pas penser à un moyen propre pour contourner le problème.

Answer 1

Nous avons eu un problème similaire au travail. ce que nous avons compris à la fin était que l'événement mousedown tirera avant l'événement de flou vous permettant de définir le contenu avant la validation ou même annuler le processus de validation complètement en utilisant un drapeau.

vérifier ce violon j'ai fait en utilisant votre exemple- http://jsfiddle.net/dL3K3/31/

$(function(){ 
    var flag = true; 
    $('input').blur(function(){ 
     if(!$(this).val() && flag){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(){ 
     flag = false; 
    });  
    $('button').mouseup(function(){ 
     flag = true; 
     $('input').val('content').focus(); 
    }); 

}); 

-Edit-

Comme @mclin suggéré, en utilisant l'événement MouseDown et preventDefault empêchera le comportement de flou. Et vous pouvez laisser le clic événement original intact -

http://jsfiddle.net/dL3K3/364/

$(function(){ 
    $('input').blur(function(){ 
     if(!$(this).val()){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(e){ 
     e.preventDefault(); 
    });  
    $('button').click(function(){ 
     $('input').val('content'); 
    }); 

}); 

Cette solution est peut-être un peu plus propre et mieux pour la plupart des cas simplement noter que si vous l'utilisez, vous aurez preventDefault et le flou de tout autre élément sur lequel porte actuellement l'attention, mais pour la plupart des cas d'utilisation, cela ne devrait pas être un problème.

Answer 2

Séparez la logique de validation d'entrée de sa propre fonction qui est appelée automatiquement par l'événement de flou puis par l'événement de clic après avoir modifié la valeur dans la zone de saisie. Vrai, votre logique de validation serait appelée deux fois, mais je ne vois pas comment contourner cela sans apporter beaucoup plus de changements.

Exemple avec jQuery:

$('input').blur(function() { 
    validate(this); 
}); 

$('submit').click(function() { 
    //modify the input element 
    validate(inputElement); 
}); 

var validate = function(obj) { 
    // validate the object 
} 

Answer 3

Cela pourrait aussi aider:

Régler une minuterie qui retarde l'action d'événement de flou avant qu'il déclenche le bouton événement click.

// Namespace for timer var setTimer = { timer: null } 

    $('input,select').blur(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $('input,select').focus(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $("#btn").click(function() { 
     clearTimeout(setTimer.timer); 
     functionCall(); 
    }); 

Answer 4

L'astuce est de ne pas utiliser le flou et cliquez sur les événements, car ils sont toujours effectués afin de flou d'abord, cliquez sur seconde. Au lieu de cela, vous devriez vérifier quand l'élément ayant le focus a changé, car cela se produit seulement après le clic.

je pense avoir une solution élégante pour celle-ci:

var alreadyValidated = 'true'; 

setInterval(function(){ 
    if(document.activeElement.id != 'validation-field-id'){ 
     if(alreadyValidated=='false'){ 
      alreadyValidated = 'true'; 
      validate(document.activeElement);  
     } 
    } 
    else { 
     alreadyValidated = 'false'; 
    } 
}, 200); 

Ces jours-ci tous les navigateurs modernes prennent en charge document.activeElement.

Answer 5

J'ai une meilleure solution que celle de Yoni Jah: appel preventDefault sur l'événement mousedown du bouton.L'onBlur n'arrive jamais et vous êtes libre de faire quoi que ce soit dans l'événement click. Ceci est préférable car cela ne change pas le comportement du clic en faisant en sorte que les choses se passent à la souris au lieu de la souris, ce qui peut être inattendu.

Answer 6

Parfois, il est utile d'obtenir un objet enfant sur mouseup, mais le parent veut cacher ses enfants sur le flou. Nous pouvons annuler la dissimulation des éléments enfants, puis attendez que notre mouseup se produit, la force alors le flou de se produire lorsque nous sommes prêts

js

var cancelHide = false; 

$('.my-input').blur(function() { 
    if (!cancelHide) { 
     $('.my-item').hide(); 
    } 
}); 

$('.my-input').click(function() { 
    $('.my-item').show(); 
}); 

$('.my-item').mousedown(function() { 
    cancelHide = true; 
}); 

$('.my-item').mouseup(function() { 
    var text = $(this).text(); 
    alert(text); 
    cancelHide = false; 
    $('.my-input').blur(); 
}); 

html

<input type="text" class="my-input"/> 
<div class="my-item">Hello</div> 
<div class="my-item">Lovely</div> 
<div class="my-item">World</div> 

css

.my-item { 
    display:none; 
} 

https://jsfiddle.net/tic84/on421rxg/

En cliquant sur les éléments de liste alertent uniquement mouseup, malgré le parent essayant de les cacher sur le flou