javascript-events - How to trigger this event?

Question

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

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

What I want to do is if the user clicks something and then leaves the keypad, validate and confirm password input.

I tried to add onmouseout and div wrapper to the table, but it was not what I expected because when the cursor hovers over the button, the event fires.

<table onmouseout="ValidatorEnable()">

Thanks.

Answer 1

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!

Answer 2

通常，开发人员不会在 onmouseout of table 时验证输入，而是 onblur 输入，或者您可以在单击按钮时触发 ValidatorEnable()。祝您好运！