元素打开时输入不会聚焦

Question

尝试在父容器打开 class 时获取焦点输入。

我目前的代码是：

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

只有当元素开始关闭时才会奇怪地工作。所以，我将其更改为：

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

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

Codepen here

Answer 1

如果您的页面上有很多输入而不是给出您想要关注的特定输入 ID 并按 ID 调用它，如下所示：

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

Answer 2

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

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

这是我创建的新 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 就在你身边：http://codepen.io/anon/pen/qaLkYo

Answer 3

我updated your CodePen.

您正在播放动画...
我没有仔细检查它是如何实现的，因为外部库 (TweenMax) 正在这样做。

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

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

我发现在这种情况下 10 毫秒的延迟就足够了。
只是为了确保我们 select 正确 input，因为即使该示例中只有一个......您的网站肯定会有更多。

我将其指定为所单击元素的兄弟的子元素。

元素打开时输入不会聚焦

Input won't focus when element opens

jquery

gsap