In JQuery, how to read the element in focus right now?

Question

There is one text input field and one button.

<input type="text" id="myInput" onblur="saveValue();" />    
<input type="button" id="myButton" />

On Blur event ( input field ), a function ( saveValue) is called. I do not want to call that function if the current focus is the button (myButton).

How can I do it in JQuery?

Answer 1

You can try:

if(!$('#myButton').is(':focus'))
    ...

Answer 2

Not sure if I've missed something, but why not just bind the blur event to the input field only:

$("#yourInputId").live("blur", function()
{
  saveValue();
});

Answer 3

You can simply try..

$(':focus').each(function(){    
   if($(this).attr('id') == 'myButton'){
     //do stuff here
   } 
});

This post at the jquery forum suggests that this works in most cases.

Answer 4

You cannot reliably do this, because one element is blurred before the next is focused. The closest approximation would be to set a timeout that you clear if the button is focused:

$(document).ready(function(){
    var timer;

    $('input').blur(function(){
        timer = setTimeout(saveValue, 100);
    });

    $('#myButton').focus(function(){
        clearTimeout(timer);
    });
}); 

Answer 5

I'm not sure if I understand your question correctly. Here is my attempt: Create the css class for the input text and use jquery to refer it that way.

Here is the code sample:

<input type="text" id="txtName" class="input-text" />
<input type="submit" value="Submit"/>

<script type="text/javascript">
$(function(){
  $('.input-text').blur(function(){
    var $this = $(this);
    //Call function save value by passing the reference of the current object
    SaveValue($this);
  });
});
</script>