如何解决iPad/iPhone中HTML select元素屏幕旋转时自动展开的问题

Hey Anitha, sorry to hear you're stuck with this annoying iOS Safari quirk—those mobile browser behaviors can be so unpredictable! The preventDefault() on orientationchange you tried might not work because this issue isn't about the orientation event itself, but how Safari retains the select element's focus state after it's been opened.

Here are a few targeted fixes that should resolve the problem:

1. Force Blur the Select on Orientation Change #

Instead of blocking the event, explicitly remove focus from all select elements when the screen orientation changes. This will close any open dropdown panels immediately:

$(window).on('orientationchange', function() {
    // Target all select elements with your form-control class
    $('.form-control').each(function() {
        if (this.tagName === 'SELECT') {
            this.blur();
        }
    });
});

This works because Safari keeps the select in a "focused" state even after you close the dropdown, and rotation triggers a reflow that reactivates it. Blurring the element breaks that state.

2. Combine with Resize Event (For Edge Cases) #

Sometimes orientationchange can fire before Safari finishes adjusting the layout. Adding a resize listener with a small delay ensures the blur happens at the right time:

let resizeTimer;
$(window).on('resize orientationchange', function() {
    clearTimeout(resizeTimer);
    // Wait 100ms for the browser to finish reflow
    resizeTimer = setTimeout(function() {
        $('.form-control').blur();
    }, 100);
});

The delay prevents us from trying to blur the element before Safari has finished updating the DOM after rotation.

3. Temporary Disable/Re-enable Select (Extreme Cases) #

If the above fixes don't work, you can briefly disable the select element to stop it from auto-expanding, then re-enable it right after:

$(window).on('orientationchange', function() {
    const $selects = $('.form-control');
    $selects.prop('disabled', true);
    // Short delay to let the rotation complete
    setTimeout(() => {
        $selects.prop('disabled', false);
    }, 50);
});

This brute-force method interrupts Safari's attempt to reactivate the select by making it unresponsive temporarily.

Quick Side Note #

I noticed a few of your <option> tags have empty value attributes (like State 2, 3, 4). While this doesn't cause the orientation bug, it could lead to issues when submitting the form—definitely worth updating those to valid values!

内容的提问来源于stack exchange，提问作者Anitha