Hiding a popup span with onblur

Greenhorn

Posts: 15

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have a popup that is similar to a 'google suggest' where it creates a drop-down based on the text after each onkeyup... There will be multiple fields like this on a page.

I'm struggling with hiding the popup if the user clicks outside the input box or tabs to the next field. I really want to use onblur, which seems to be designed exactly for this - except when I use it, it hides the popup when you click on a selection in the popup box - prior to it executing the script to put the value in the input box. If it could execute the clicked on action, then hide the box, it would work perfectly.

I'm trying to avoid using the 'find the mouse cursor click and determine if it is inside or outside the popup...' method. With that method I also have to take into account if they tab outside the input box.

Any suggestions?

Here is the slimmed down code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<script language="JavaScript">
function unhide(xelement){
 document.getElementById(xelement).style.visibility="visible";
}
function hide(xelement){
 document.getElementById(xelement).style.visibility="hidden";
}
</script>

<body>
<form name='testForm'>
field 1: <input type='text' id='field1' name='field1' onkeyup='unhide("popup1");' onblur='hide("popup1");' autocomplete='off'><br>
field 2: <input type='text' id='field2' name='field2' onkeyup='unhide("popup2");' onblur='hide("popup2");' autocomplete='off'>
</form>
<span style='visibility:hidden; position:absolute; border:1px solid black; background-color:#AAA;' id='popup1'>
<div onclick='document.testForm.field1.value="PC110"; hide("popup1");'>PC110</div>
<div onclick='document.testForm.field1.value="PC120"; hide("popup1");'>PC120</div>
</span>

Campbell Ritchie

Marshal

Posts: 80652

476

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Not a "Java in General" question. Moving to the HTML/JavaScript forum.

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

Chris Huber

Greenhorn

Posts: 15

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I solved it by nesting the popup within the span.

Eric Pascarello

author

Posts: 15385

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The solution most people would do is add logic to your hide function that sees what element the event fired in and see if it is the child of the wrapper. Also your code is not keyboard accessible so you are limiting your audience to having to use a mouse.

Eric