I am trying to stop mobile keyboard from showing when the element on focus is a drop-down but it still does not work. My code looks like below. Any ideas how I can achieve this. The problem is only on mobile.

Please note that the HTML is structured the by author of the plugin that I am using. It is the "marital status field" on this page.

// jQuery

$("#s2id_autogen1").attr("readonly", "readonly");

// HTML

<div style="width: 100%; max-width: 1903px; display: block;" id="s2id_marital_status" class="select2-container um-form-field valid um-s1"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span id="select2-chosen-1" class="select2-chosen">Marital Status</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a> <label for="s2id_autogen1" class="select2-offscreen"></label> <input id="s2id_autogen1" aria-labelledby="select2-chosen-1" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text"> </div>