Modifying attribute on Rad Capatcha

1 Answer 34 Views
Captcha
David
Top achievements
Rank 1
David asked on 23 Aug 2023, 05:49 PM

For accessibility, I'm trying to add a tabindex attribute to the captcha image.

Here is the script I'm using:

document.addEventListener("DOMContentLoaded", function(){    

document.getElementById("ctl00_ContentContainer_EntityFormControl_aeace8755f5aec118f8f000d3a5b28d1_EntityFormControl_aeace8755f5aec118f8f000d3a5b28d1_EntityFormView_captcha_CaptchaImageUP").tabIndex = 0;

alert(‘page loaded successfully’);

});

The script can't seem to find the image tag by the id. What am I missing here?

 

 

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 28 Aug 2023, 10:26 AM | edited on 28 Aug 2023, 10:27 AM

Hello,

You can use the OnClientLoad client event of the RadCaptcha to ensure that the control and its image are created and available on the page:

<script>
    function OnClientLoad(sender, args) {
        // Find the CAPTCHA image element by its ID
        var captchaImage = document.getElementById('ctl00_ContentPlaceholder1_RadCaptcha1_CaptchaImage');

        // Check if the element was found
        if (captchaImage) {
            // Add the tabIndex attribute to the image element
            captchaImage.tabIndex = 0; // You can set any tabIndex value you want
        }
    }
</script>
<telerik:RadCaptcha OnClientLoad="OnClientLoad" ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
    ValidationGroup="Group">
    <CaptchaImage ImageCssClass="imageClass" />
</telerik:RadCaptcha>

You can create a more generic approach by targeting the CAPTCHA image using its class or other attributes that uniquely identify it. Here's an example using the class name "imageClass" as mentioned in your original code:

<script>
    function OnClientLoad(sender, args) {
        // Find the CAPTCHA image element using its class name
        var captchaImage = document.querySelector('.imageClass');

        // Check if the element was found
        if (captchaImage) {
            // Add the tabIndex attribute to the image element
            captchaImage.tabIndex = 1; // You can set any tabIndex value you want
        }
    }
</script>
<telerik:RadCaptcha OnClientLoad="OnClientLoad" ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
    ValidationGroup="Group">
    <CaptchaImage ImageCssClass="imageClass" />
</telerik:RadCaptcha>

 

 

Regards,
Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Tags
Captcha
Asked by
David
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or