disable external item picker textbox in SharePoint 2013 for both IE and Chrome using jquery

Question

I am able to disable the textbox for an external item picker in IE using the following code:

$(document).ready(function () {
 $("#ctl00_ctl38_g_5eae8b5a_8fcf_4fd4_a009_8eb60e3ef71e_ctl00_ctl05_ctl10_ctl00_ctl00_ctl04_ctl00_e3eb4cbb_3dea_47dc_8b94_05ee27d20e79_Picker_upLevelDiv").prop("disabled", true);
});

This code is ignored by Chrome. How does one disable the textbox in Chrome? The reason for disabling this textbox is that it would drive users to use the external item picker controls located to the right of the textbox (that I'm trying to disable) so that they would use them, rather than entering some kind of string in the textbox.

Thanks.

Answer 1

I tried your code and I made sure that the Disable property is not working with chrome ! so I tried to add class to disable the same control in chrome.

Unfortunately, it's now working only in chrome, but not in IE , so I bundled both methods to make sure it will work in all browser as the following,

<style type="text/css">
    .notactive {
        pointer-events: none;
        cursor: default;
    }
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () { 
// for Chrome
$("#ctl00_ctl40_g_6d5af262_d05f_4ca6_84fa_ad70448f166d_ctl00_ctl05_ctl04_ctl00_ctl00_ctl04_ctl00_d807e17c_f848_418b_ae6a_461d53b17684_Picker_upLevelDiv").addClass("notactive");

// for IE
$("#ctl00_ctl40_g_6d5af262_d05f_4ca6_84fa_ad70448f166d_ctl00_ctl05_ctl04_ctl00_ctl00_ctl04_ctl00_d807e17c_f848_418b_ae6a_461d53b17684_Picker_upLevelDiv").prop("disabled", true);

});

</script>

Answer 2

For anyone who has this problem here's how I solved it:

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
    $(document).ready(function () {
        //For IE
        if (isIE) {
            $("#ctl00_ctl30_g_a0408623_d6c4_4354_828f_62a027475e50_ctl00_ctl05_ctl10_ctl00_ctl00_ctl04_ctl00_922aecba_6c0b_4eda_ad8a_653397b25303_Picker_upLevelDiv").prop("disabled", true);
        }
        else {
            //For Chrome
            $("#ctl00_ctl30_g_a0408623_d6c4_4354_828f_62a027475e50_ctl00_ctl05_ctl10_ctl00_ctl00_ctl04_ctl00_922aecba_6c0b_4eda_ad8a_653397b25303_Picker_upLevelDiv").attr("contenteditable", false);
        }
    });