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

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

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

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

• javascript
• jquery

• can you paste code here? – Amit Commented Jun 16, 2013 at 6:28

3 Answers 3

To tell between "focus" events that e from keyboard and those that e 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/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/orlenko/cwRAw/

Use keyup

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

function ren(){

    alert('Holla!');

}
$('input').focus(ren);
$('input').mousedown(function(){      
$('input').off('focus',ren);  
});
$('input').mouseup(function(){      
$('input').on('focus',ren);  
});

Don't check in focus function instead remove the focus function when making a click

Demonstration