Camilo Rincon Camilo Rincon - 5 months ago 35
jQuery Question

How to handle focus in click and tab?

I need to hide a div with some content when a input is clicked, but when the input is focus by tab the content should be showed. Currently i can show and hide the div with the content but i can't handle well the focus when is clicked i have a bounce because is focus and clicked at the same time.

Here's my code

CodePen



$(function() {
$('.myinput').click(function(e) {
$('.text').addClass('hidden');
console.log("click");
});
$('.myinput').focus(function() {
$('.text').removeClass('hidden');
console.log("focus");
});
});

.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<input class="myinput" type="text" />
<div class="text">
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
<div>TEXT TEXT TEXT</div>
</div>
</div>




Answer

I added a variable to determine if the mouse is being pressed, and only hide the text content if it is. Results in mouse-focus text being hidden, tab-focus text is shown.

Also changed the click handler to a mousedown handler, the click event only fires after a mouse down + mouse up causing your flickering problem.

codepen

var mousedown = false;

$(function () {
    $('.myinput').mousedown(function(e) {
      mousedown = true;
      $('.text').addClass('hidden');
      console.log("click");
    });
    $('.myinput').focus(function() {
      if(!mousedown) $('.text').removeClass('hidden');
      console.log("focus");
    });
});

$(window).mouseup(function(e){
  mousedown = false;
})