Question

我希望在显示输入时添加焦点。在Firefox和Internet Exoplorer中，它运行良好，但仅在Chrome中它不起作用。

Jquery代码：

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

HTML code：

<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 不会被隐藏。
感谢

Answer 1

看起来你在屏幕上完成显示之前就一直在关注元素。

试试这个。

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

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

Answer 2

尝试将代码更改为：

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

 });
});

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

Chrome - 专注于输入无效

2 个答案: