隱藏元素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

回答

相關問題