Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding an onblur event to a selectbox div only mockup
    primarykey
    data
    text
    <p>I can't seem to quite figure out so as to add an onblur event to my css div only selectbox.</p> <p>The normal onblur method for my wrapper div is not working:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #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; } &lt;/style&gt; &lt;script type="text/javascript"&gt; 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 } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="one" onclick="hidecommentsbox()"&gt; &lt;ul onclick="textToTextArea(event)" id="commentsbox" onblur="hidecommentsbox()"&gt; &lt;li&gt;Item 1&lt;/li&gt; &lt;li&gt;Item 2&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="two"&gt;&lt;img src="images/arrow_double.png" onclick="showcommentsbox()"&gt;&lt;/div&gt; &lt;br&gt; &lt;textarea id="result"&gt;&lt;/textarea&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload