Jquery Form - показать / скрыть / остаться видимым при записи в области ввода - PullRequest
Новая
       16

Jquery Form - показать / скрыть / остаться видимым при записи в области ввода

1 голос
/ 03 июня 2011

Я исследовал это около 3 дней без перерыва, и я начинаю чувствовать настоящее отчаяние.Также я должен сказать, что я новичок в JQuery, я делаю только маленькие вещи время от времени.Итак, вот в чем дело: у меня есть эта форма поиска (в Wordpress).Я хочу, чтобы это было скрыто в начале.При наведении мыши на ссылку меню, она скрывает ссылку и отображает форму поиска.При отпускании мыши он скрывает форму поиска и снова отображает ссылку.Я выполнил это, и это код: 

jQuery(document).ready(function(){
  jQuery('#toggle-search').hide();
  jQuery(".buscar").mouseenter(function(){
    jQuery('#toggle-search').show('fast');

    return false;
  });   

  jQuery(".inputbuscar").click(function(){
    jQuery('#toggle-search').show('fast');

    return false;
  });   

  jQuery(".buscar").mouseleave(function(){
    jQuery('#toggle-search').hide('fast');

    return false;
  });
});

Это будет HTML 

<li id="search-jq" class="buscar">
  <a href="#">Buscar</a>
  <div id="toggle-search">
    <form role="search" method="get" id="searchform" action="" >
      <div class="form-buscar">
        <label class="screen-reader-text" for="s"></label>
        <input type="text" name="s" id="s" class="inputbuscar" onclick="this.value='';" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="" class="lupa"/>
      </div>
    </form>
  </div>

Css на самом деле не имеет значения, я не применяю отображение: нет.

Что я не могу сделать, так это сделать форму все еще видимой, если кто-то пишет и перемещает мышь из области (т. Е. Форма остается видимой во время записи (при нажатии?), Несмотря на то, что мышь где-то находитсяеще, но получить форму исчезнуть, если они никогда не нажимали в форме).Я сейчас вне перспективы и не знаю, насколько это просто или просто невозможно.Любые советы действительно приветствуются.

Ответы [ 2 ]

2 голосов
/ 03 июня 2011

Используйте фрагмент кода Бена Алмана - https://gist.github.com/450017

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Затем вы можете сделать следующее: 

jQuery(".buscar").mouseleave(function(){
  if($('#toggle-search input:focus').length == 0) {
    jQuery('#toggle-search').hide('fast');
  }

  return false;
});

РЕДАКТИРОВАТЬ: Обновлен код для использования .data метод для сохранения состояния наведения на поле поиска.

$(document).ready(function(){
  var $search = $('#toggle-search');
  var $search_trigger = $(".buscar");
  $search.hide().data('hover', false);

  $search_trigger.mouseenter(function(){
    $search.show('fast').data('hover', true);
  }).mouseleave(function(){
    if($search.find('input:focus').length == 0) {
      $search.hide();
    }
    $search.data('hover', false);
  });

  $(".inputbuscar").click(function(){
    $search.show('fast');

    return false;
  });     

  $search.find("input").focusout(function(){
    setTimeout(function() {
      if($search.find('input:focus').length == 0 && $search.data('hover') == false) {
        $search.hide('fast');
      }    
    }, 10);
  });
});
0 голосов
/ 03 июня 2011

Попробуйте что-то вроде этого: 

$("#searchform :input").focus(function(){
    $("#toggle-search").show();
});

Вы также можете посмотреть на toogle (), чтобы немного очистить ваш код: http://api.jquery.com/toggle/

...