Javascript flou-cliquez pas travailler ensemble

Question

Je les following code:

HTML:

<input type='text' class='a' /> 
<div class='inst' tag='a'></div> 
<input type='text' class='b' /> 
<div class='inst' tag='b'></div> 
<input type='text' class='c' /> 
<div class='inst' tag='c'></div> 

JS:

$(function() { 
    $('.inst').click(function() { 
     alert($(this).attr('tag') + ' clicked'); 
    }); 

    $('[type=text]').focus(function() { 
     show_inst($(this).attr('class')); 
    }).blur(function() { 
     //hide_inst($(this).attr('class')); 
    }); 

    function show_inst(tag) { 
     $('div.inst[tag=' + tag + ']').html(tag + ' instructions'); 
    } 

    function hide_inst(tag) { 
     $('div.inst[tag=' + tag + ']').html(''); 
    } 
}); 

CSS:

.inst { 
    width: 200px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 10px; 
    cursor: pointer; 
} 

Il fonctionne très bien: quand inst est cliqué Je vois le message d'alerte, et quand l'entrée devient focalisée l'instruction apparaît.

Maintenant je veux que l'instruction non pertinente disparaisse sur le flou. J'ai donc essayé d'ajouter la ligne commentée à l'intérieur blur(). Cela ne fonctionne pas comme ça parce que blur() est appelé en premier et supprime l'instruction, donc si je clique sur l'instruction - rien ne se passe.

Comment pourrais-je résoudre ce problème?

Answer 1

Si votre seul problème est que l'instruction est cachée avant que le clic dessus ne soit émis, pensez à ajouter un minuscule délai. Cela entraînera essentiellement l'exécution de votre instruction de masquage après le traitement du clic.

Quelque chose comme ceci:

$('[type=text]').focus(function() { 
    show_inst($(this).attr('class')); 
}).blur(function() { 
    setTimeout(function(){ 
    hide_inst($(this).attr('class')); 
    }, 50); // make this happen after any other events 
}); 

Answer 2

 var timeoutId; 
     $('[type=text]').on("blur", function(){ 
      timeoutId = setTimeout(function(){      
       console.log("blur"); 
      }, 50); 
     }).on("focus", function(){ 
      clearTimeout(timeoutId); 
     }); 

Ou vous pouvez essayer cela, il sera le feu flou que lorsque vous quittez l'entrée (la « false » clic est éliminé par clearTimeout).