Javascript onfocus / onblur проблемы - PullRequest
Новая
       11

Javascript onfocus / onblur проблемы

0 голосов
/ 08 июня 2011

Итак, я делаю небольшую панель поиска, которая показывает результаты под ней, например: 

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

Я в основном делаю livesearch с помощью AJAX.<div id='Results'> изначально скрыт, пока вы не наберете, и он заполняет некоторые результаты.Моя проблема, однако, заключается в том, чтобы скрыть это, когда пользователь щелкает.исчезновение через onblur также не работает, так как мне нужно иметь возможность нажимать на результаты, чтобы они не исчезали на мне.К сожалению, я пока не смог найти хороший не jQuery метод в интернете.Самый простой способ выразить это: я хочу, чтобы результаты исчезли, если щелкнуть что-либо, кроме <div id='searchWrapper'>.Спасибо!

Ответы [ 2 ]

0 голосов
/ 08 июня 2011

Вот неоптимизированное, но работающее решение без jQuery 

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

Переключить при нажатии на div обёртки 

 var hide= (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results");
document.getElementById("Results").style.display=(hide)?"none":"block";
0 голосов
/ 08 июня 2011

Добавить слушателя к документу (используя addEventListener ) - Пример JSFiddle 

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

Но если вы собираетесь использовать значительное количество Javascriptна вашем сайте вы можете рассмотреть возможность использования jQuery - это сделает вашу жизнь намного проще.

...