How to handle focus in click and tab?

Question

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>

If you click in the input hide the content, then tou click outside the input and again click in the input you can see the bounce, because when click exists focus so the try to show the content and in less than a second hide it. — Camilo Rincon
– Camilo Rincon, Commented Jun 25, 2016 at 18:00

IrkenInvader · Accepted Answer · 2016-06-25 18:01:07Z

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

Collectives™ on Stack Overflow

How to handle focus in click and tab?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related