Chrome - 输入框聚焦失效

Question

当我的输入框出现时，我希望能够使其获得焦点。在Firefox和Internet Explorer中，它能够正常工作，但是在Chrome中却无法正常工作。

JQuery代码:

$(document).ready(function() {
 $('.magnifier').click(function() {
  $('.search').slideToggle("slow");
   setTimeout(function() {
     $('.input-search').focus();
   }, 0);
 });
});

HTML代码：

<a class="magnifier" style="cursor: pointer"><img src="magnifier.png" alt="search"/></a>          
 <div class="search" class="rightfloat" style="display: none">    
   <input style="font-family:'Open Sans'" type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" class="input-search" />
 </div>   

在Chrome中，当我点击放大镜图标时，输入框不会获得焦点。但是当我再次点击（隐藏.search）后，输入框获得焦点，而.search没有被隐藏。
谢谢

- ViktorR

Answer 1

看起来你正在尝试在元素在屏幕上完全显示之前就对其进行聚焦。

请尝试使用以下方法。

    $(document).ready(function(){
        $('.magnifier').on('click', function() {
            $('.search').slideToggle(300, function(){
                $('.input-search').focus();
            });
        });         
    });

它的作用是将输入框向下滑动，当滑动完成后，它会让输入框获得焦点。这对我有效。

- robbclarke

---

你不能再快15秒吗？ ;D - Nico O

我知道，对吧？至少我们知道它是正确的，不是吗？ - robbclarke

对我来说，OP的代码在Chrome上可以工作，但肯定有比使用超时更好的方法。 - A. Wolff

Answer 2

尝试将您的代码更改为以下内容：

$(document).ready(function() {
 $('.magnifier').click(function() {
     $('.search').slideToggle("slow", function(){
         $(".input-search").focus();
     });

 });
});

http://jsfiddle.net/NicoO/zNLQS/

- Nico O