onBlur event

MachThree · October 1st, 2009, 07:00 PM

Hi all - I have several text boxes on my page, and I've set the onBlur handler for each to call a function. The problem is, I only want my event handler to take action if the blur was caused by the user clicking the mouse somewhere else on the page. I do not want it to do anything if the blur happened because the user tabbed away from the element, or if the focus was programatically set to a different element.

Is there any way to determine from the event object if the tab key was pressed, or if the mouse button was pressed? I've tried looking at event.button and event.keyCode but they both always seem to be set to 0 for an onBlur event. Is there any other way to tell?

Part of the issue for me is that the onBlur event seems to be the first event that fires (before, for example, onKeyPress or onMouseDown).

My target browser for the moment is IE7.

Thanks in advance for any help.

planoie · October 2nd, 2009, 12:18 PM

The blur event is separate from mouse click or key press events, so that's why you won't see a useful value for keyCode or button on the event object in an onBlur handler.

Based on your criteria, I'm not sure how you're going to filter out the conditions you don't want. You might be able to capture the keyDown event to detect the tab key (save to some global var), then in the blur event handler you can test for the last key being the tab. But if you want to filter out programmatic focus changes, you'll probably need to program that in to all the places that might move focus away from that control in order to set a flag that it was a programmatic move versus a user action.

MachThree · October 2nd, 2009, 12:29 PM

Quote:

Originally Posted by planoie

The blur event is separate from mouse click or key press events, so that's why you won't see a useful value for keyCode or button on the event object in an onBlur handler.

Based on your criteria, I'm not sure how you're going to filter out the conditions you don't want. You might be able to capture the keyDown event to detect the tab key (save to some global var), then in the blur event handler you can test for the last key being the tab. But if you want to filter out programmatic focus changes, you'll probably need to program that in to all the places that might move focus away from that control in order to set a flag that it was a programmatic move versus a user action.

So basically my four text boxes would each call the same function onBlur, but each would pass a different parameter.

Like this:

Code:

<input type="text" onBlur="blurHandler(1)"></input>
<input type="text" onBlur="blurHandler(2)"></input>
<input type="text" onBlur="blurHandler(3)"></input>
<input type="text" onBlur="blurHandler(4)"></input>

So what I decided to do is to make a proxy function for onBlur, and just have it save the parameter value that was passed. Then the mouseeventhandler checks to see if that saved value is null, and if its not, run the original blur event handler, passing it that param. Then it sets the saved value back to null.

Code:

<script>

var buttonNumberProxyValue;

function blurHandlerProxy(buttonNumber)
{
    buttonNumberProxyValue = buttonNumber;
}

function blurHandler(buttonNumber)
{
      //do something
}

function mousedownhandler()
{
      if (buttonNumberProxyValue != null)
      {
              blurHandler(buttonNumberProxyValue);
      }
   
      buttonNumberProxyValue = null;
}
</script>

<body onmousedown="mousedownhandler()">

<input type="text" onBlur="blurHandler(1)"></input>
<input type="text" onBlur="blurHandler(2)"></input>
<input type="text" onBlur="blurHandler(3)"></input>
<input type="text" onBlur="blurHandler(4)"></input>

</body>