jQuery .blur（）和.focus（）事件的問題

我有一個有幾個輸入字段的窗體。當用戶點擊一個輸入字段時，會出現一個隱藏的div，併爲該字段進行一些選擇，然後他們可以選擇一個選項，並將其設置爲字段值。jQuery .blur（）和.focus（）事件的問題

目前，div被隱藏的方式是當用戶選擇一個選項。這工作正常，但如果用戶不想選擇一個選項，該div將不會被刪除。所以，我的解決方案是在輸入字段上使用模糊事件，這會隱藏它們的div元素。這樣，用戶可以在表單中選中，看到隱藏的div，並在離開該字段時隱藏它。這也可以正常工作。

問題出現時，他們現在想要點擊div中的某些內容填充到輸入中。因爲我甚至添加了模糊效果，甚至在用戶嘗試單擊div中的選項時觸發，在用戶單擊之前有效地隱藏div，因此不會向輸入字段添加任何內容。

解決此問題的最佳方法是什麼？我想要使用blur事件來隱藏div，但是當用戶想要在div內單擊時，需要有某種異常，而blur事件不會隱藏他們嘗試點擊的div。

感謝您的幫助。

來源

2009-09-15 Nic Hubbard

您可以在blur事件上設置超時時間，並且只有當另一個輸入字段處於焦點時，纔會立即隱藏「幫助div」。

事情是這樣的：

$("#input1").focus(function() { 
     hideAllHelpers(); $("#helper1").show(); 
}); 

$("#input1").blur(function() { 
     window.setTimeout(function() { $("#helper1").hide(); },2000); }); 
}); 

$("#input2").focus(function() { 
     hideAllHelpers(); $("#helper2").show(); 
}); 

// etc...

你當然可以使它更通用的，它可以使用一些微調，但你的想法...

來源

2009-09-15 19:20:16

的onblur，設定的超時在隱藏相應的div之前等待一秒鐘。然後，點擊，清除超時。這裏有一個基本的例子...

// Namespace for timer 
var myPage = { 
    timer: null 
} 

// Blur event for textbox 
.blur(function() { 
    myPage.timer = setTimeout(function() { 
    // Hide the div 
    }, 1000); 
}); 

// Click event for DIV 
.click(function() { 
    clearTimeout(myPage.timer); 
    // Fill in the textbox 
    $(this).hide(); 
});

來源

2009-09-15 19:20:45

我會把添加一個關閉按鈕，並在該字段後立即製表符。這將解決用戶不知道祕密的問題（通過標籤）可能沒有意識到有一種方法可以在沒有選擇選項的情況下解除對話。

來源

2009-09-15 19:38:52

使用mousedown事件，該事件在用戶單擊幫助器元素但在輸入元素上觸發blur事件之前觸發。

$('#input').blur(function() { 
    $('#helper').hide(); 
}); 

$('#helper').mousedown(function() { 
    console.log('This executed before the blur event'); 
});

來源

2013-01-10 23:49:13 d2vid

jQuery .blur（）和.focus（）事件的問題

回答

相關問題