Last Updated: February 25, 2016
·
436
· avdyushin

Hide select box picker on orientation change

Developing HTML5 mobile apps for iOS, some times we need to hide select box picker after we changed orientation. To do this, we can just call blur() function at our list element in on resize event. So, if we have select list like this:

<select id="list">
    <option>Apple</option>
    <option>Orange</option>
</select>

We need to bind on resize event after content loaded and call blur():

window.addEventListener('DOMContentLoaded', function() {
    var list = document.getElementById('list');
    window.onresize = function() { list.blur(); };
}, false);