web-dev-qa-db-fra.com

Comment puis-je déclencher un événement de flou Javascript après un clic qui provoque le flou?

J'ai rencontré ce problème à quelques reprises et je ne suis pas satisfait des solutions que j'ai utilisées auparavant.

J'ai une zone de saisie avec un événement de flou qui en valide le contenu et un bouton qui remplira la zone de saisie au clic. Le problème est que le fait de cliquer sur le bouton déclenche l'événement de flou d'entrée, puis l'événement de clic de sorte que le contenu inséré par le bouton ne soit pas validé.

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

Je sais que c'est le comportement correct mais je ne peux pas penser à un moyen propre de résoudre le problème.

javascriptjqueryeventsonclickonblur
25
Jake

Nous avons eu un problème similaire au travail. ce que nous avons compris à la fin , c’est que l’événement mousedown se déclenchera avant l’événement de flou , ce qui vous permet de définir le contenu avant la validation ou même d’annuler complètement le processus de validation [.____. un drapeau.

vérifiez ce violon que 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();
    });

});

-Modifier- 

Comme @mclin le suggère, l'utilisation de l'événement mousedown et de preventDefault empêchera le flou. Et vous pouvez simplement laisser l'événement de clic d'origine 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 meilleure dans la plupart des cas. Notez simplement que si vous l'utilisez, vous éviterez le défaut et le flou de tout autre élément sur lequel l'accent est actuellement mis, mais pour la plupart des cas d'utilisation, cela ne devrait pas poser de problème.

34
Yoni Jah

J'ai une meilleure solution que celle de Yoni Jah: , Appelez preventDefault lors de l'événement de souris du bouton. OnBlur n'arrive jamais, vous êtes donc libre de faire ce que vous voulez dans l'événement click.

C’est mieux car cela ne change pas le comportement du clic en rendant les choses plus difficiles au lieu de la souris levée, ce qui peut être inattendu.

19
mclin

Cela pourrait aussi aider:

Définissez une minuterie qui retarde l'action d'événement de flou avant qu'elle ne déclenche l'événement de clic de bouton.

// 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();
    });
8
Vardhini

Séparez la logique de validation d'entrée de sa propre fonction, qui est appelée à la fois par l'événement blur et automatiquement, puis par l'événement click après la modification de la valeur dans la zone de saisie. Certes, votre logique de validation serait appelée deux fois, mais je ne vois pas comment résoudre ce problème sans apporter beaucoup plus de modifications.

Exemple utilisant jQuery:

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

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

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

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 attendre que la souris se produise, puis forcer le flou à 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 la liste, vous ne serez alerté que par la souris, même si le parent tente de les masquer par rapport au flou.

0
tic