Javascript onfocus / onblur issues

Question

So I am making a little searchbar that shows results underneath of it like such:

<div id='searchWrapper'>
  <div id='Search'>
    <input id="inputSpn" type="input" value="" />
    <input id="searchBtn" type="image" src="/search.png" />
    <br clear='all'/>
  </div>
  <div id='Results'>
  </div>
</div>

I am basically doing a livesearch with through AJAX. The <div id='Results'> is initially hidden until you type and it populates some results. My issue however is getting it to hide when the user clicks away. having it disappear through onblur does not work either as I need to be able to click on the results and not have them disappear on me. Unfortunately I have not been able to find a good non jQuery method on the internet yet. Simplest way to put it is: I want the results to disappear if anything but the <div id='searchWrapper'> is clicked. Thanks!

If jQuery: [here](http://stackoverflow.com/questions/1259716/how-to-blur-the-div-element), [here](http://stackoverflow.com/questions/5165411/how-do-i-hide-a-div-when-it-loses-its-focus), [here](http://stackoverflow.com/questions/5547981/jquery-how-to-hide-a-div-when-user-clicks-on-anything-but-that-div-no-overlay) — mplungjan, Jun 08 '11 at 07:17

Michael Robinson · Answer 1 · 2011-06-08T08:17:28.753

0

Add a listener to the document (using addEventListener) - JSFiddle Example

<style>
#Results {
     display: none;   
}
</style>

<script type="text/javascript">
window.onload = function(){
    document.addEventListener('click', function(event){
        if(document.getElementById('searchBtn') != (event.target) ? event.target : event.srcElement) {
            document.getElementById('Results').style.display = 'none';
        } else {
            document.getElementById('Results').style.display = 'block';
        }
    });
};
</script>

<div id='searchWrapper'>
    <div id='Search'>
        <input id="inputSpn" type="input" value="" />
        <input id="searchBtn" type="button" value="Search"/>
        <br clear='all'/>
    </div>
    <div id='Results'></div>
</div>

But if you are going to be using a significant amount of Javascript in your site, you might consider using jQuery - it will make your life much easier.

edited Jun 08 '11 at 08:17

answered Jun 08 '11 at 07:18

Michael Robinson

27,775
10
102
126

Non-IE solution and it will hide if anything but the search button was clicked – mplungjan Jun 08 '11 at 07:28
Never claimed it was an IE solution. If the asker wants JS that works well cross-browser, the asker should consider using a library. – Michael Robinson Jun 08 '11 at 07:29
or just added the ternary test for event.target/event.srcElement – mplungjan Jun 08 '11 at 08:15
@mplungjan, nice suggestion, added :) – Michael Robinson Jun 08 '11 at 08:17

mplungjan · Accepted Answer · 2011-12-26T18:19:24.710

Here is a non-optimised but working non-jQuery solution

<script>
document.onclick=function(e) {
  var elem = e?e.target:event.srcElement;
  var id = elem.id;
  document.getElementById("inputSpn").value=id+" clicked"; // debug - remove when happy
  // the following could be done by looping over the searchWrapper and its children
  if (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results") {
    document.getElementById("Results").style.display="none"
  }
}
</script>
<div id='searchWrapper'>
  <div id='Search'>
    <input id="inputSpn" type="input" value="" />
    <input id="searchBtn" type="image" src="TekTP/icons/search.png" />
    <br clear='all'/>
  </div>
  <div id='Results'>hello
  </div>
</div>

UPDATE:

Toggle if clicked on the wrapper div

 var hide= (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results");
document.getElementById("Results").style.display=(hide)?"none":"block";

You are welcome :) PS: I think the
should be outside the div before the results div — mplungjan, Jun 08 '11 at 07:31

Javascript onfocus / onblur issues

2 Answers2