Log in

View Full Version : Adding an onblur event to a selectbox div only mockup


jason_kelly
11-22-2013, 06:36 PM
Hello,

I need your help.

I can't seem to quite figure out so as to add an onblur event to my css div only selectbox.

The normal onblur method for my wrapper div is not working:


<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
float: left;
position:absolute;
}

#commentsbox, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#commentsbox, ul, li {
padding: 2px;
}
#commentsbox li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>

<script type="text/javascript">
function showcommentsbox(){
document.getElementById("one").style.display="block";
}
function hidecommentsbox(){
document.getElementById("one").style.display="none";
}

// pick a name that's useful to you:
function textToTextArea (e) {

e = e ? e : event;
var text = e.target ? e.target : e.srcElement;

document.getElementById('result').innerHTML = text.innerText
}



</script>

</head>

<body>

<div id="container">
<div id="one" onclick="hidecommentsbox()">
<ul onclick="textToTextArea(event)" id="commentsbox" onblur="hidecommentsbox()">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>

<div id="two"><img src="images/arrow_double.png" onclick="showcommentsbox()"></div>
<br>
<textarea id="result"></textarea>
</body>

</html>
molendijk
11-22-2013, 08:08 PM
Try this:
<html onmousedown="hidecommentsbox()">
jason_kelly
11-24-2013, 05:15 PM
It doesn't work for IE. Any other suggestions?
jscheuer1
11-24-2013, 06:39 PM
There is no cross browser onblur event for anything other than form elements, anchor links, and area (image map area tags) links. The best strategy is to use the onblur event of one of those elements.
molendijk
11-24-2013, 08:23 PM
It doesn't work for IE. Any other suggestions?
It works on my machine, with IE. What IE-version are you using?
djr33
11-24-2013, 08:33 PM
There is no cross browser onblur event for anything other than form elements, anchor links, and area (image map area tags) links. The best strategy is to use the onblur event of one of those elements.
Wouldn't it be possible (if not especially easy) to create one?

1. Add an onclick event to the whole webpage. And another to the element in question.

2. When that element is clicked, set a variable somewhere called "element_is_selected" (etc.).

3. Then when you click anywhere on the page, check for two conditions:
--the click was on the page but not on the element in question [this can be done by using return false within the element's onclick, right?]
--the variable element_is_selected is set to TRUE
If those conditions are met, then:
--set element_is_selected to FALSE (for the next time you click somewhere)
--do the "onblur" event you'd like.

[Note: I'm assuming that the events triggering onclick = onblur in the broad sense-- of course you might also have something using the keyboard like the tab key, but generally speaking I'd imagine a div wouldn't involve using the tab key. If you did add some extra functionality like that, adjust the idea above accordingly.]


Of course, yes, it would be easier to use something that is already designed for this...