Блог

Главная - Вопросы по программированию - Переключить div на фокус поля ввода

Переключить div на фокус поля ввода

#html #focus #toggle

#HTML #фокус #переключить

Вопрос:

У меня есть HTML, подобный этому:

 <div id="navigation">
     <ul>...</ul>
</div>
<div id="header-search">
     <input id="search-input" type="text" />
</div>

Когда поле ввода сфокусировано, мне нужно, чтобы оно скрывало div «навигация», а затем заставляло его появляться снова, когда текстовое поле больше не сфокусировано.

Я несколько раз пытался выполнить это с помощью CSS, что было бы проще, чем Javascript, но безуспешно. Эффект затухания также был бы хорош.

Любая помощь приветствуется.

Ответ №1:

 <script type="text/javascript">
function showNav(show) {
  if (show) {
    document.getElementById('navigation').style.display = '';
  } else {
    document.getElementById('navigation').style.display = 'none';
  }
}
</script>
<div id="header-search">
     <input id="search-input" type="text" onblur="showNav(true)" onfocus="showNav(false)"/>
</div>

Ответ №2:

Это можно сделать с помощью jquery, надмножества javascript. Вы можете узнать об этом (и загрузить файлы .js) по http://jquery.com

или вы можете сделать с помощью «прямого» javascript следующим образом:

 <head>
    <title></title>

    <script type="text/javascript">
        function hideNav() {
            var nav = document.getElementById("navigation");
            nav.style.display = "none";
        }

        function showNav() {
            var nav = document.getElementById("navigation");
            nav.style.display = "";
        }

    </script>
</head>
<body>
<div id="navigation">
     <ul><li>something</li><li>something else</li></ul>
</div>
<div id="header-search">
     <input id="search-input" type="text" onfocus="hideNav();" onblur="showNav();" />
</div>
</body>
</html>

Ваш эффект затухания и манипулирование этими и другими объектами dom становится намного проще с помощью jquery, но пока это поможет вам двигаться дальше..

редактировать после вашего комментария о том, что переход слишком «быстрый», я подумал предложить это:

 <div id="container" style="width:150px;height:150px;">
<div id="navigation">
     <ul><li>something</li><li>something else</li></ul>
</div></div>

если поместить навигационный div во внешний div фиксированного размера, другие элементы на странице не будут «прыгать», когда навигационный div становится скрытым. не приводит к исчезновению, но обеспечивает более чистый пользовательский интерфейс. Конечно, ваш пробег может отличаться. Что касается того, почему jquery не сработал, я не уверен без большего количества того, что вы пробовали.

Комментарии:

1. Итак, используя jquery .fadeToggle: <script type="text/javascript"> $("#search-input").click(function() { $("#navigation").fadeToggle("slow", "linear"); }); </script> … ничего не происходит. Я уверен, что это связано с тем, что это поле ввода и фокусировка вместо простого щелчка. Спасибо за быстрые ответы. Прямой javascript отлично работает, он просто кажется слишком «быстрым» для того, что я хочу, чтобы он делал.