Call Onblur Event Only When Tab Key Is Pressed

I have a textbox on which I want to execute onBlur event only when tab key is pressed to remove focus from textbox. How can I do this through javascript? Any help is appreciated..

Solution 1:

In browsers, pressing the tab key when a control has focus will move it to the next element in the tab order, causing the current element to lose focus and dispatch a blur event.

Therefore you can just test for the pressing of the tab key and call your function based on that, e.g.

<scripttype="text/javascript">functionshowKey(e) {
  return e.which || e.keyCode;
}

</script><form><inputtype="text"onkeydown="this.form.msg.value = showKey(event);"><inputtype="text"name="msg"></form>

The above shows that the tab key has a value of 9, so you can do:

if ((e.which || e.keyCode) == 9) {
  // tab key was pressed, do stuff
}

Note that while most browsers support e.which, others e.keyCode.

Edit

Based on your comment, the following shows that when the control loses focus, the value of the hidden field has been set:

  <input type="text" onkeydown="this.form.msg.value = showKey(event);
  (event);" onblur="alert(this.form.msg.value);">

Solution 2:

`enter code here`

<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script><scripttype="text/javascript">
    $(document).ready(function () {
        $("#theDiv input").bind("blur", function () {
            setTimeout(function () {
                var isOut = true;
                $("#theDiv input").each(function () {
                    if (this == document.activeElement) isOut = false;
                });
                if (isOut) {
                    // YOUR CODE HEREalert("I am called");
                }
            }, 10);
        });
    });
</script><!-- ... --><divid="theDiv"><inputtype="text"value="Inside DIV 1" /><inputtype="text"value="Inside DIV 2" /><inputtype="text"value="Inside DIV 3" /></div><inputtype="text"value="Outside DIV" />

Solution 3:

<scripttype="text/javascript">functioncallfunc() {
 alert("Hello");
}

</script><form><inputtype="text"onblur="callfunc();"></form>