Is there a DOM event that fires when an HTML select element is closed?
Unfortunately there's no standard event for knowing when a select box is closed or open, so your code is going to be pretty hairy with accommodations for different browsers. That said, I think it can be done, and I've gotten something working for you in Firefox using the mouseup
event:
http://jsfiddle.net/FpfnM/50/
In Firefox (and I'm assuming Chrome), you're going to need to track the state of that select pretty carefully. When an escape
key is pressed or blur
event occurs, you need to update the state to identify it as closed. I haven't implemented that in my demo, and you can see what happens if you hit escape instead of clicking off the select.
Things were easier in Safari, where a mousedown
event on the select signifies opening the select, and any close of the select is signified by a click
event.
If you find a browser where none of these events fire, you can try one additional trick. Because form widgets like select and textarea are often rendered by the OS and not inside the browser it's possible that you could interact with them and certain messages might not get down to the browser's event handler. If you were to position a transparent textarea covering the screen at a lower z-index when the select box is open, you might be able to use it to track that close click. It may be able to capture events that a browser DOM element may miss.
Update:
Chrome sees a mousedown on the select when it opens and a mouseup on the document when the page is clicked with a select open. Here's a version that works with Chrome:
http://jsfiddle.net/FpfnM/51/
Again, you'll need to do some browser detection to handle the right behavior in each one. One catch with Chrome, in particular, is that no event is fired when you click on the select a second time to close it. You can detect the page click, however.
Quick Summary:
Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close
There are an awful lot of edge cases for other events that will signify a close (escape keypress, blur, etc.), but these are the minimum to handle the scenario where a user clicks the select box and then clicks off into the document area.
Hope this helps!
Need to fire an event when a select menu closes or hides (disappears from view). Which event can I latch on to, to accomplish this?
Update:
$(document).click(function(event) { $target = $(event.target); if($("select").is(":focus") && !$target.closest('#select').length) console.log("click outside");});
$("select").on("click", function(event) { console.log("click option");})
//$("select").on("mouseleave", () => console.log("left"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="select" class="form-control" id="patient_registration-patient-province"> <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option> <option value="Alberta">Alberta</option> <option value="British Columbia">British Columbia</option> <option value="Manitoba">Manitoba</option> <option value="New Brunswick">New Brunswick</option> <option value="Newfoundland">Newfoundland and Labrador</option> <option value="Northwest Territories">Northwest Territories</option> <option value="Nova Scotia">Nova Scotia</option> <option value="Nunavut">Nunavut</option> <option value="Ontario">Ontario</option> <option value="Prince Edward Island">Prince Edward Island</option> <option value="Quebec">Quebec</option> <option value="Saskatchewan">Saskatchewan</option> <option value="Yukon">Yukon</option></select>
Is there a DOM event that fires when an HTML select element is opened in iOS?
Try .focus
. I set up a basic fiddle example and it works on my iPhone 4S with iOS 6.
Does an event fire when a select element is dropped down
Try this
<select id="selectOption">
<option value="1">One</option>
<option value="2">two</option>
</select>
$(document).ready(function() {
$('#selectOption').click(function(){
alert('clicked');
});
});
Need an event to fire when selecting index in dropdown in JavaScript
It seems that you want something that is already answered in another question.
JQuery event to fire when a drop down is selected -- but the value is not changed
https://stackoverflow.com/questions/11002421/jquery-event-to-fire-when-a-drop-down-is-selected-but-the-value-is-not-change
Hope this helps.
Related Topics
Pure JavaScript Method to Wrap Content in a Div
Stop User from Using "Print Scrn"/"Printscreen" Key of the Keyboard For Any Web Page
Html 5 Canvas Lineto() Line Color Issues
Programmatically Selecting Text in an Input Field on iOS Devices (Mobile Safari)
How to Hide a ≪Option≫ in a ≪Select≫ Menu With Css
Add Active Navigation Class Based on Url
How to Achieve Equal Height Divs (Positioned Side by Side) With HTML/CSS
How to Get Possibly Overlapping Matches in a String
How to Copy to the Clipboard in JavaScript
How to Select Multiple Files With ≪Input Type="File"≫
Intercept a Form Submit in JavaScript and Prevent Normal Submission
Drag Drop Files into Standard HTML File Input
PHP+Js: How to Do Fileuploads in HTML Form as Content-Type Multipart (Via Js)
Why Write ≪Script Type="Text/JavaScript"≫ When the Mime Type Is Set by the Server
How to Make a Div Stick to the Top of the Screen Once It's Been Scrolled To