jquery - 聚焦时无法选择输入文本

Question

我正在创建一个搜索栏，该搜索栏在使用时会展开，不用时会收缩。我让那部分工作了，问题是收缩有点过度热心。当我在栏中写一些东西然后尝试点击我刚写的一个词时，我又缩水了。这很奇怪，因为据我所知我并没有失去对酒吧的关注，所以为什么要这样做。我正在使用焦点和模糊来触发扩展和收缩。

$(document).ready(function(){
  $(".search_bar").bind('focus blur', function(){
      $('.search_bar').toggleClass('search_bar_focus');
      $('.search_button').toggleClass('search_button_focus');
      $('.logo').toggleClass('logo_focus');
  });

这是我的代码:http://jsfiddle.net/easilyBaffled/bbrP9/3/

Answer 1

问题是 z-index: -1;在 .search_bar:focus, .search_bar:active

在 firefox 中，这意味着页面实际上堆叠在您输入的前面。它仍然可以接收输入，但当您单击时，您实际上是在单击文档。

在 chrome 中，它甚至无法接收输入。

无论哪种情况，将 z-index 更改为正数都有效。