Chrome - 专注于输入不起作用答案

【问题标题】：Chrome - focus on input doesn't workChrome - 专注于输入不起作用
【发布时间】：2014-03-15 02:44:50
【问题描述】：

我想在我的输入显示时添加焦点。在 Firefox 和 Internet Exoplorer 中它工作正常，但只有在 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 没有隐藏.
谢谢

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

您似乎正试图在元素完成显示在屏幕上之前将注意力集中在该元素上。

试试这个。

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

它正在做的是向下滑动输入，当它完成滑动时然后它告诉它专注于输入。它对我有用。

【讨论】：

你不能快 15 秒吗？ ;D
我知道，对吧？至少我们知道它是正确的，对吧？
对我来说，OP 的代码在 chrome 上运行，但可以肯定这是比使用超时更好的方法

【解决方案2】：

尝试将您的代码更改为：

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

 });
});

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

【讨论】：