单击时如何告诉 onBlur 不要隐藏提交按钮？

Question

我的模糊事件隐藏了提交按钮；但这样做似乎取消了提交事件。我只想在未单击提交本身时隐藏。如何确定焦点是否由于提交而丢失，或者只是因为在其他地方徘徊？

<form action="" method="post">
    <textarea id="message" name="message"></textarea>
    <input type="submit" id="share" value="Share">
</form>
...

$('textarea').blur(function(){ 
     $('#share').hide() 
})
$('textarea').focus(function(){ 
     $('#share').show() 
})

设置超时以允许在返回模糊之前触发提交事件对我来说似乎有点 hacky。我们不能做得更好吗？我可以告诉模糊不要阻止其他事件吗？或在 dom 中搜索待处理的提交事件？还是……？

---

解决方案

今天是基于勾选的答案，但更简单。使用 jquery 的“fadeOut”例程来

1. 将提交按钮的隐藏状态延迟到提交事件触发之后，并且
2. 让用户感觉他们的提交正在被处理

.

$('textarea').blur(function(){ 
     $('#share').fadeOut() 
})
$('textarea').focus(function(){ 
     $('#share').fadeIn() 
})

这是间接的，并不是我真正想要的，但似乎很清楚，直接操纵事件队列 - 例如写 onBlur 说“如果他们没有点击提交，则隐藏提交按钮” - 可能不是技术上可行。

Answer 1

这是一种选择，虽然使用 jQuery .queue() 和 .clearQueue() 设置动画队列并在发生任何事情之前立即清除它有点笨拙：

   $(function() {
     $("#message").blur(function() {
       $("#share").delay(100).fadeOut();
     });
     $("#share").click(function() {
       $(this).clearQueue();
     });
   });

注意：需要 jQuery 1.4+

Answer 2

如果隐藏提交按钮，提交将取消。

试着让它完全透明。

编辑：例如：

$('#share').css({ opacity: 0, position: 'absolute' });