Prevent onKeyUp from triggering onBlur?

RationalRabbit
RationalRabbit used Ask the Experts™
on
I have some rather complicated Zip Code input fields. The user may enter a zip code, a city name or a city/state. onKeyUp is used to do a search by zip (after 5 chrs if numeric) - At 6 or more chars, it checks for Canadian zip or city, or city state. The result may show a single entry on an exact match, or a select list on multiple matches.

This all works fine except that it allows the user to exit the field with a "not found" entry, and I cannot figure out how to do a final check when they have left the field.

My first thought was to use onBlur. I quickly discovered that onBlur (as well as onFocus) is triggered with each onKeyUp. Somehow, I need to be able to do a final check on field exit and produce an error message on no match.

Hoping someone has a bright idea here.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
In my forms, onKeyUp does not by itself trigger onBlur.  It must be what you are doing after that that is triggering it.  Of course if you put up text in another field that will probably do it too.

Author

Commented:
Are you sure of this?
I have stripped it down:
<input id="OriZip" type="text" name="OriZip" value="" onKeyUp="alert('KeyUp')" onBlur="alert('blur')" />
The blur is triggered before the onKeyUp.
After your comment, I created this simple file:
<!DOCTYPE html>
<html>
<head><title>f</title>
</head>
<body>
   <form>
      <input type="text" name="SomeName" value="" onKeyUp="alert('KeyUp')" onBlur="alert('Blur')" />
   </form>
</body>
</html>

Open in new window

The results are the same. Tested in latest FireFox and IE9.
If you add onFocus to the mix, this will also be triggered with each keypress, which says to be that, in order for onKeyUp to work, it must lose focus.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
The 'alert' is where the 'focus' is going which causes the effect of 'onBlur'.  You're defeating yourself with that code.  Anything you do that changes the 'focus' to another window or dialog is going to have the effect of 'onBlur'.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Seems like there should be a way to build a condition into the onBlur, but I don't know what that would be.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
??  onBlur is defined as losing Focus.  And new window or dialog will cause that.
Top Expert 2013

Commented:
All this speculation is vry nice but I don't see any live code to actually debug so with any real code all that can happen here is throwing stuff on the wall to see is something sticks.

Post a link to the page and perhaps we can find a way to do what you need done.

Cd&

Author

Commented:
I guess the simplest thing to do would be to just re-check the fields with the Ajax routine on submit. There is no way within that routine to produce a "not found"  unless you know the user has completed the entry.

Thanks for the input.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
We don't know what you are doing so it's hard to help you.  I have an AJAX routine that displays choices from a database as you type in the right column on this page:  http://www.dibsplace.com/webdev/ndxv1.php  Is that what you are trying to do?

Author

Commented:
I don't want to waste your time, but I guess I didn't explain it well enough.
There are two zip code fields - Origin and Destination.
In either of those fields, the user may enter a U.S. or Canadian Zip Code OR a city, or a city & state.
The Ajax routine is in place and working fine. onKeyUp, it aborts if there are less than 5 characters in the field.
At five characters, it checks to see if the string is numeric and, if so, checks for a U.S. zip code.
If a singular zip code is found, that city, state and zip are entered into the input box.
If multiple entries are found, the input changes to a select box and displays the choices.
If more than 5 characters are entered, and the length is 6, it will first look for a Canadian Zip Code. If not found, or the string is longer than 6 characters, it will look for any cities beginning with that string.
I'm not "trying" to do this. This all works and, to me, for a number of reasons, is preferable to popping up a list with every keystoke.

So, if the user puts in "99205", or "N8N1A1", it will immediately find the proper city (or cities) and state (or Province).
If the user enters "Clover", it will find any city starting with the word "Clover" and allow the user to select.

Where the problem comes in is if the user enters "junkname", and goes on to the next field, I cannot immediately tell them that was not found and send them back to the field.

The Ajax routine produces a "not found", but it is ignored when received, and it waits for the next input. If the user exits the field, the incorrect entry is left behind.

So, for lack of a better solution, I guess what I will do is run the Ajax routine again at form submit, with a parameter telling it to react to a "not found"., displaying an error message at that time and sending the user back to the field. It would be nice if this could be done upon exiting the field in the first place, but a wrong entry cannot be determined until the field is exited.
Expert of the Year 2014
Top Expert 2014
Commented:
Create a global var to hold 0 (zero)
Once a correct value has been entered either through a valid entry or selecting from the dropdown (don't know how you validate an entry since you have not posted any code) change the var to 1.  Then you can use that to know whether the field is valid or not and force focus back to the input if they try to leave it (jquery focusout function)
Fixer of Problems
Most Valuable Expert 2014
Commented:
You could have the AJAX 'not found' routine put up a message in a <div> beside the <input> that says 'Not Found' until a usable zip or name is found.  Putting a message in a <div> will not change the focus because there is no user entry there.  That's what I'm doing on the demo page I posted a link to above.

Author

Commented:
Dave - Yeah, this is what I came around to thinking. Then, on submit, I can check the contents of the div if it still hasn't been corrected.

Both of these are good suggestions. Either one would still mean I would have to check on submit, but better than having to run the Ajax routine again. Dave's suggestion at least allows me to notify the user while they are still in that section of the form.

Thanks!
Expert of the Year 2014
Top Expert 2014

Commented:
You can attach a focusout event to the input and run your check immediately before you even get to the submit. The focusout only triggers when the element loses focus which means clicking anywhere else or tabbing out of the element
http://api.jquery.com/focusout/

But after reading thru the question again you never mention jquery so may not be the solution.

Author

Commented:
Thanks for mentioning that. Good to know. Not using jQuery on this site, though. (Except for JQ Mobile)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial