New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Disable Auto Complete in Chrome for Input elements, RadTextBox and RadComboBox

Description

If you have a requirement to stop the auto fill feature of the input elements, RadTextBox and RadCombobox, you should be aware that the autocomplete="off" attribute (see input autocomplete) is currently ignored by many of the modern browsers, including Chrome.

Solution

In the recent updates of Google Chrome (released after January 2019), the autocomplete attribute values can disable either the autocomplete or the autofill, not both. In such a case, we can just temporarily set .name attribute of the input to a random string, so that neither the autocomplete nor the autofill are triggered, and in the blur event of the input to restore the original name.

The following example allows the same OnClientLoad event handler to be used by both TextBoxes and ComboBoxes:

<form id="form1" runat="server" autocomplete="off">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server">
        <ClientEvents OnLoad="onClientLoad" />
    </telerik:RadTextBox>

    <telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientLoad="onClientLoad">
        <Items>
            <telerik:RadComboBoxItem Text="Item 1" />
            <telerik:RadComboBoxItem Text="Item 2" />
        </Items>
    </telerik:RadComboBox>
</form>
function OnClientLoad(sender, args) {
    disableAutoFill(sender);
}

function disableAutoFill(control) {
    function focusHandler(ev) {
        this.originalName = this.name;
        this.name = new Date().toString();
    }

    function blurHandler(ev) {
        this.name = this.originalName;
    }

    if (Telerik.Web.UI.RadComboBox && control instanceof Telerik.Web.UI.RadComboBox) {
        $telerik.$(control.get_inputDomElement()).on({
            focus: focusHandler,
            blur: blurHandler
        });
    } else if (Telerik.Web.UI.RadTextBox && control instanceof Telerik.Web.UI.RadTextBox) {
        $telerik.$(control.get_element()).on({
            focus: focusHandler,
            blur: blurHandler
        });
    }
}

SEE ALSO

In this article