在 CSS 转换结束后设置输入插入符号焦点答案

【问题标题】：Set input caret focus after CSS transitions end在 CSS 转换结束后设置输入插入符号焦点
【发布时间】：2018-12-26 08:45:33
【问题描述】：

我正在尝试创建搜索输入效果，我需要延迟触发焦点，因为我需要输入以等待搜索图标 CSS 过渡结束。

我尝试使用.delay() 和setTimeout 函数，但焦点没有等待或根本不工作。我也搜索了解决方案，但没有一个与我想要实现的目标相近。

$('.input').bind('focus', function() { $(this).blur(); $('.search-icon').addClass('active').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ $('.input').focus(); }); });

这是我的主要 jQuery 代码，这里是 Codepen：https://codepen.io/chakachuk/pen/BvZRmB

我希望我的结果接近这个：

【问题讨论】：

标签： jquery input focus

【解决方案1】：

我使用 CSS 而非 JS 实现了这一点：

$('.input').bind('focus', function() {
  $(this).css('color', 'transparent');
  $('.search-icon').addClass('active').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    $('.input').css('color', '#fff');
  });
});

我只是用透明颜色隐藏输入插入符号，直到过渡结束

【讨论】：