如何在单击时再次将焦点状态应用于相同元素？

Question

对于我的表单输入，我想对于像输入重新做我的聚焦状态的动画：

<input type="text" class="form-control"> 

你可以看到它在这里的行动：https://jsfiddle.net/esg1dzy0/

虽这么说，我不能这样做与此：

$(document.activeElement).click(function(){ 
    this.focus(); 
    }); 

这可能吗？我究竟做错了什么？

Answer 1

您需要先模糊元素。

在你这样做之前，你需要确保这不是第一次点击元素。

此外，您的原始选择器只会选择在您的代码段运行时处于活动状态的元素。

最后，使用mousedown避免闪烁。

$('.form-control').mousedown(function(){ 
    if(!$(this).is(':focus')) return; 
    $(this).blur().focus(); 
}); 

Answer 2

我希望这可以帮助你：

$('.form-control').on('click', function(){ 
    var $this = $(this); 
    var duration = 300; 
    var enableAgain = function(){ 
    $this.blur().focus(); 
    }; 

    setTimeout(enableAgain, duration); 
}); 

这触发300 milliseconds后再次在blur()和focus()事件（在最好的情况下），这是一样的transition-duration你也许想更大的值，如350。

顺便说一句我已经编辑你的https://jsfiddle.net/esg1dzy0/文件。