Modifying attribute on Rad Capatcha

[David]

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?

 

 

[Rumen]

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