Focus Which not triggered by click

Question

How to trigger an action when focusing an input but the focus event not come from click?

$('#input').focus(function(){
  if(not come from click)
  {
    alert('Holla!');
  }
});

Answer 1

To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.

First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/

In it, we'll log mousedown, mouseup, click, focus, and blur events.\

<input type="text" id="zero"/>
<input type="text" id="one"/>

JavaScript:

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
       console.log('focus');
    });

    one.blur(function() {
       console.log('blur');
    });

});

If we simply click on the input, and then on another control, we'll get the following:

• mousedown
• focus
• mouseup
• click
• blur

But if we tab into and out of the input, we'll see in the console:

• focus
• blur

So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
        $(this).data('mousedown', true);
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
        if ($(this).data('mousedown')) {
            console.log('You clicked it!');
        } else {
            console.log('You tabbed it!');
        }
    });

    one.blur(function() {
       console.log('blur');
       $(this).data('mousedown', false);
    });

});

A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/

Answer 2

Use keyup

 $('#input').keyup(function(){
    alert('Called only when the focus is on element through keypress');
 });