CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Camilo Rincon
Camilo Rincon

Reputation: 111

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>

Upvotes: 2

Views: 3341

Answers (1)

IrkenInvader
IrkenInvader

Reputation: 4050

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;
})

Upvotes: 2

Related Questions