Question

当父容器打开类时，尝试获取焦点输入。

我到目前为止的代码是：

$("#search-trigger").click(function(){
 $("input").focus(); 
});

当元素开始关闭时，只会奇怪地起作用。所以，我把它改成了：

$("#search-trigger").click(function(){
  if(("#target-2").hasClass("open")){
    $("input").focus();
  }else{
  $("input").blur();}
});

根本不起作用。有什么想法吗？

Codepen here

Answer 1

我认为这里的主要问题是输入没有完成动画，所以jQuery无法专注于它。解决方案是使用TweenMax的onComplete事件在显示目标后关注元素。

但请注意，您的原始问题并未包含动画代码，因此如果他们不愿意查看您的CodePen，则此网站上的其他人将无法提供帮助。< / p>

这是我制作的新JavaScript，但您只需修改原始代码即可使用onComplete功能：

$('.trigger').click(function(e) {
  //remove active class from other triggers
  $('.trigger').not(this).removeClass('active');
  //toggle active class on this trigger
  $(this).toggleClass('active');
  //get target element
  var target = $('#' + $(this).attr('data-target-id'));
  //hide all elements of target class, except the current target
  if($('.target.open').not(target).size() > 0) {
    TweenMax.to($('.target.open').not(target), .2, {display:'none', y:'0%', autoAlpha:0});
    //remove open class from target elements that are now hidden
    $('.target.open').not(target).removeClass('open');
  }
  //if this element is now active
  if($(this).hasClass('active')) {
    //show current target element
    TweenMax.to(target, .2, {display:'block', y:'100%', autoAlpha:1, onComplete:function() {
      //once animation is complete, if the target has an input, focus on that input
      if(target.find('input').size() > 0) {
        target.find('input').focus();
      }
    }});
    //indicate that this target class element is now open
    target.addClass('open');
  }
  //if the element is no longer active
  else {
    //hide the target
    TweenMax.to(target, .2, {display:'none', y:'0%', autoAlpha:0});
    //remove open class from newly hidden target element
    target.removeClass('open');
  }
});

这是一个CodePen，回到ya：http://codepen.io/anon/pen/qaLkYo

Answer 2

我updated your CodePen。

你正在进行动画...
我没有仔细检查它是如何实现的，因为外部库（TweenMax）正在这样做。

但是，看到动画，我想到了延迟这是我的答案。

您不能focus display设置为none的元素。
您的动画在某个地方将此显示设置为block或inline-block ...

我发现在这种情况下需要10毫秒的延迟我们确保选择正确的input，因为即使该示例中只有一个......您的网站也会有更多肯定。

我将其指定为点击元素的兄弟的子项。

以下是相关代码：

// This is the code for the input focus
$("#search-trigger").click(function(){
    var searchInput = $(this).siblings().find("input");
    setTimeout(function(){
        searchInput.focus();
    },10);
});

Answer 3

如果你的页面上有很多输入，而不是给你想要聚焦ID的特定输入，并按照这样的ID来调用它：

 $("input#my-input").focus();

元素打开时输入不会聚焦

3 个答案: