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:

Code:

<!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:

**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

Originally Posted by jason_kelly

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...

Thread: Adding an onblur event to a selectbox div only mockup

Thread Tools

Search Thread

Adding an onblur event to a selectbox div only mockup

Similar Threads

Adding a Short Delay before Triggering MouseOver Event

what to use in the field onblur, onload, onchange...???

help with onBlur not working

JavaScript and DOM textarea onblur issue.?

Adding an onClick event

Bookmarks

Bookmarks

Posting Permissions