隐藏元素onFocus和显示onBlur

我有2个表单输入，其中onFocus我想隐藏页面上的另一个元素。隐藏元素onFocus和显示onBlur

$(document).ready(function() { 
     $('.email').focus(function() { 
      $('.note').fadeTo('fast', 0); 
     }).blur(function() { 
      $('.note').fadeTo('fast', 1); 
     }); 
     $('.password').focus(function() { 
      $('.note').fadeTo('fast', 0); 
     }).blur(function() { 
      $('.note').fadeTo('fast', 1); 
     }); 
    });

非常基本的东西，但我还需要确保这两个输入之间切换时（.email &。密码），其隐藏的元素不会再次变得可见。

似乎有时当我在它们之间切换时，隐藏的元素闪回视图，或者.focus事件未被触发，因为该元素由于某种原因未处于对焦状态。

有没有反正我说，如果在.email &之间切换.note元素是隐藏的.password保持隐藏状态，直到焦点从这两个元素中消失为止？

来源

2012-06-08 CLiown

你试过两个合并成一个单一的语句： '$（ '电子邮件。密码'）专注（...' – Quantastical

@MrSlayer我的想法正好 – gdoron

看来问题。焦点并不总是事件，有时我点击第二个输入，但它不重点。 – CLiown

您可以利用:focus来验证其他字段当前是否为焦点。

$(document).ready(function() { 
     $('.email').focus(function() { 
      $('.note').fadeTo('fast', 0); 
     }).blur(function() { 
      if ($('.password:focus').length == 0) 
       $('.note').fadeTo('fast', 1); 
     }); 
     $('.password').focus(function() { 
      $('.note').fadeTo('fast', 0); 
     }).blur(function() { 
      if ($('.email:focus').length == 0) 
       $('.note').fadeTo('fast', 1); 
     }); 
    });

来源

2012-06-08 12:49:39 nebulousGirl

我在jsFiddle上尝试了几件事，并提出了以下解决方案。看起来，blur()正在focus()之前执行，这就是为什么它消失，然后立即淡出。

我放了一个超时，在短时间后延迟模糊事件，所以我们可以在执行模糊之前检查是否有新焦点元素。

$(document).ready(function() { 
    $('.email, .password').focus(function() { 
     $('.note').fadeTo('fast', 0); 
    }).blur(function() { 
     setTimeout(function() { 
      if($('.email:focus, .password:focus').length == 0) 
      { 
       $('.note').fadeTo('fast', 1); 
      } 
     }, 100); 
    }); 
});

来源

2012-06-08 16:54:17 Quantastical

隐藏元素onFocus和显示onBlur

回答

相关问题