聚焦时无法选择输入文本

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; on .search_bar：focus，.search_bar：active

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

在Chrome中，它根本无法接收输入。

在任何一种情况下，将z-index更改为正数都可以。