Can I detect the source of a focus? (Javascript, jQuery)

Question

Hi all,

Quick question - is it possible to detect whether a focus has come from a mouse click or a tab from a focus event?

I guess if there isn't, I'll have to use a click handle on the same element to determine the source, but I'd prefer a way from the focus event.

Thanks

Gausie

Answer 1

May not work 100% but if there isn't a direct way then can't you just use Mouseover and detect it? The person will have bring the mouse over the control to select it (?)

Answer 2

I'm quite confident that a focus event does not trac the way the focus has been ordered (window.focus, key, click...).

But in the case of a click, you can detect the mouse click. You can also detect keyboard event (more on that http://www.quirksmode.org/js/keys.html).

Answer 3

What about using mouse position?

In the event handler, compare the current mouse position with the area of your control. If the coordinates fall within the area of the control don't scroll.

This is not a perfect solution of course, since they could hover the element, and then tab to it without clicking. But since you are attempting to reduce any disorientation, this might actually be good side effect.

When working with mouse position, I like to use the script from quirksmode.org. I think Jquery may provide some functionality for it too.

Answer 4

Try getting the keyCode - here's a link to an article that goes into detail on how. The comments at the bottom may be useful as well.

http://www.geekpedia.com/tutorial138%5FGet-key-press-event-using-JavaScript.html

Here's the code from the article. It doesn't show it, but the keyCode for tab is 9.

<script type="text/javascript">

document.onkeyup = KeyCheck;       

function KeyCheck(e)

{

   var KeyID = (window.event) ? event.keyCode : e.keyCode;


   switch(KeyID)

   {

      case 16:

      document.Form1.KeyName.value = "Shift";

      break; 

      case 17:

      document.Form1.KeyName.value = "Ctrl";

      break;

      case 18:

      document.Form1.KeyName.value = "Alt";

      break;

      case 19:

      document.Form1.KeyName.value = "Pause";

      break;

      case 37:

      document.Form1.KeyName.value = "Arrow Left";

      break;

      case 38:

      document.Form1.KeyName.value = "Arrow Up";

      break;

      case 39:

      document.Form1.KeyName.value = "Arrow Right";

      break;

      case 40:

      document.Form1.KeyName.value = "Arrow Down";

      break;
   }

}
</script>

Answer 5

If anyone's interested, here's how I did it:

$('input').focus(function(){
 $this = $(this);
 $this.parents('tr').css('background-color','yellow'); 
 if($this.attr('click')!='true'){
  $('body').scrollTop($this.offset().top-($(window).height()/2));
 }
}).blur(function(){
 $(this).parents('tr').css('background-color','transparent');
}).mouseover(function(){
 $(this).attr('click','true');
}).mouseout(function(){
 $(this).removeAttr('click');
});