1

I've read up on questions pertaining to detecting the state of a select menu, whether it's visible, open, or closed and the quick answer is that it's not universal and depends on what you're trying to do. My situation isn't covered by any of these answers 100%.

I need to determine when the select menu is closed, which currently works by storing a variable onblur; however, the select element does not lose focus on the first click off, but rather the second click off. Is there an event I can detect which occurs on the first click off? or make the select lose focus on the first click off rather than the second click off? Looking for pure JavaScript answers, no jQuery.

Here's some sample code demonstrating this: http://jsfiddle.net/BhnH9/1/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • Have you tried `onchange`? For other elements it only gets triggered on blur, but I have a vague idea it's different for `` drop-down opens or closes. Note though that your talk of clicking isn't going to cover all bases: if you press the tab key while the list is open that closes it and moves to the next element. Also, using the keyboard you can select different options without even dropping down the list... – nnnnnn Aug 19 '11 at 01:29
  • @nnnnnn That's why I'm detecting onblur, because regardless of using a mouse or keyboard to change areas of focus, I can capture them all. The problem is when you click off the select with a mouse onto a blank area of the page, the focus is still on the select (even if the drop down closes), it's only on a second click that the select officially blurs –  Aug 19 '11 at 01:32
  • In IE `onchange` gets triggered when you select a new option with the mouse even though the element still has focus (but doesn't get triggered if you click the already select option, and doesn't seem to be triggered by keyboard changes unless the focus is changing). – nnnnnn Aug 19 '11 at 05:54
  • Good question. This is biting me in the ass with client-side validation in Android smart phones right now. – Robusto Nov 01 '12 at 20:07

2 Answers2

0

Recently there was a comment on this thread, so I decided to take another look at the issue. I don't recall quite what the original circumstances were, but I do know that I needed the select drop down to lose focus after selected an item. So lo and behold, my jQuery solution... what with me saying it had to not be jQuery :) It's been a long time, I've switched jobs, and don't know why that was a requirement.

$('select').bind('change', function(e) {
  $(this).trigger('blur');
});

$('select').bind('blur', function(e) {
  alert('select lost focus');
});

Here's a JSFiddle: http://jsfiddle.net/7tUse/

0

You can use a general click listener on the document (or some other suitable ancestor of the select) and see if the select element matches the document.activeElement. If so, then it has focus either because it just got it or an option has been selected.

However, there are other ways of selecting options than clicks, such as keyboard navigation. A click listener will not help you there.

RobG
  • 142,382
  • 31
  • 172
  • 209
  • Well, if I force the select to lose focus upon a click event on the document, would that not help me there and cover my bases? –  Aug 19 '11 at 02:27
  • I implemented what you said and it's the same issue. http://jsfiddle.net/BhnH9/2/ If you click or cause focus to the drop down in some manner, then click on a blank area, it's not until you click a second time that both the `blur` of the select and the `click` of the body are logged. –  Aug 19 '11 at 04:12
  • Generally, you can't know when a select's list is open or not, just tracking clicks is not sufficient given all the different methods available for selecting and re-selecting options and navigating. All you can say is that onblur, the list is closed. – RobG Aug 19 '11 at 04:33
  • This I know, which is my solution. The question is why it takes **TWO** clicks to register that I've taken focus away. Why does a click on the `body` only register after two clicks when a `select` has active focus? –  Aug 19 '11 at 05:18