How to trigger this event?

Question

I have two password inputs. They are both entered by the password keypad, but no keyboard input. The keypad is a 3 by 3 table with button 1 to 9.

How can I trigger the event when the client mouse cursor leave the keypad table?

What I wanna do is if the user click something and then leave the keypad, so validate the confirm password input.

(*I tried to add onmouseout to the table and div wrapper, but not what I expected, because when the cursor over the button, the event fires.)

<table onmouseout="ValidatorEnable()">

Thanks.

Answer 1

As usually, developers don't validate input when onmouseout of table, but onblur of input or you can fire ValidatorEnable() when you click the button.Best wishes!

Answer 2

You need to do some work on this. First of all on ready event of document get size and position of table or div containing keypad. then in mouseout event on that container check if current cursor is out of the boundaries of container.

<script type="text/javascript">
    var tp=0;//top
    var lft=0;//left
    var rht=0;//right
    var bot=0;//bottom
    function CheckBounds(x,y){
       return (x < tp || y < lft) || (x > rht || y > bot);
    }
</script>

<script type="text/javascript">
    $(document).ready(function(){
       tp=$("#tbl").position().top;
       lft=$("#tbl").position().left;
       rht=$("#tbl").width() + lft;
       bot=$("#tbl").height() + tp;

       $("#tbl").mouseout(function(e){
          if(CheckBounds(e.pageX, e.pageY)){
             //DO Validation here
          }
       });
    }):
</script>

PS:- I've tested it in FF 3.5 with firebug. Chrome crashed!