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

Captcha Audio Code



   
  • Demo Configurator

In order for RadCaptcha to be accessible for visually-impaired users, the control can generate an audio code.

To enable this functionality, you need to set the CaptchaImage-EnableCaptchaAudio property to true. This will cause the link button that retrieves the audio code to be rendered below the CaptchaImage.

To control the visual appearance of the link button, the rcCaptchaAudioLink CSS class should be used.

It is possible to add noise to the audio code functionality by setting the property CaptchaImage-EnableAudioNoise to true.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="C#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Captcha.CaptchaAudioCode.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"
    Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="All" ID="rfdacc1" DecorationZoneID="audioCaptcha"
        Skin="Telerik" />
    <div id="audioCaptchaExample" class="demo-container size-narrow">


    <div id="audioCaptcha">
        <div class="divCaptcha">
            <table>
                <tr>
                    <td style="height: 20px;">
                        <asp:Label ID="lblErrorMessage" runat="server" ForeColor="Red" CssClass="errorMessage"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%; text-align: center; padding-left: 30px; padding-top: 3px;">
                        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
                            ValidationGroup="vgAudio" ValidatedTextBoxID="rcTextBox1" Display="None">
                            <CaptchaImage EnableCaptchaAudio="true" RenderImageOnly="true" ImageCssClass="rcCaptchaImage"
                                BackgroundColor="#609f0a" TextColor="White" BackgroundNoise="None"></CaptchaImage>
                        </telerik:RadCaptcha>
                    </td>
                </tr>
                <tr>
                    <td style="padding-left: 100px; padding-top: 10px;">
                        <br />
                        <asp:Label ID="rcLabel1" runat="server" AssociatedControlID="rcTextBox1" Text="Type the code from the image:"
                            ForeColor="#005000"></asp:Label>
                        <br />
                        <asp:TextBox ID="rcTextBox1" runat="server" MaxLength="5" Width="170px"></asp:TextBox>&nbsp;&nbsp;&nbsp;
                        <asp:Button ID="Button1" runat="server" ValidationGroup="vgAudio" Text="Submit" OnClick="Button1_Click"></asp:Button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </div>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            function pageLoad() {
                var captchaTextBox = document.getElementById("<%=rcTextBox1.ClientID %>");
                captchaTextBox.setAttribute("autocomplete", "off");
            }
            //]]>
        </script>
    </telerik:RadScriptBlock>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                            <asp:CheckBox ID="cbEnableCaptchaAudioNoise" runat="server" Text="Add Noise to the CaptchaAudio Code Functionality"
                                AutoPostBack="true" OnCheckedChanged="cbEnableCaptchaAudioNoise_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>  
                        <li>  
                            <qsf:TextBox ID="txtGetAudioCode" Label="Set the text to the CaptchaAudio LinkButton:" runat="server"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button ID="btnAudioCode" runat="server" Text="Set" OnClick="btnAudioCode_Click"
                                CausesValidation="false"></qsf:Button>

                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance