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

Keyboard Support

Event log

This example demonstrates how you can use the keyboard to control a RadImageButton. You can focus a button by using the Tab key if you set the TabIndex property of RadImageButton according to the desired flow of the page.

In addition, you can use a shortcut if you set the AccessKey property. In this demo the AccessKey property of the Previous, Play and Next buttons are set respectively to "B", "P" and "F". You can also use the Tab key to focus it and Space/Enter to execute its click. Press Alt+AccessKey in IE and Chrome, Shift+Alt+AccessKey for Firefox and Shift+Esc+AccessKey for Opera.

To execute a selected Image button press the Enter or Space key when it is focused.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg player-body-bg">
        <telerik:RadImageButton CssClass="btnPrevious" ID="btnPrvious" runat="server" Width="35px" Height="35px" AutoPostBack="false" AccessKey="B" TabIndex="1"
            OnClientClicked="telerikDemo.OnClientClicked">
            <Image Url="images/Previous_btn_normal.png" HoveredUrl="images/Previous_btn_hover.png" PressedUrl="images/Previous_btn_pressed.png" />
        </telerik:RadImageButton>
        <telerik:RadImageButton CssClass="btnPlay" ID="btnPlay" runat="server" Width="60px" Height="60px" AutoPostBack="false" AccessKey="P" TabIndex="2"
            OnClientClicked="telerikDemo.OnClientClicked">
            <Image Url="images/Play_btn_normal.png" HoveredUrl="images/Play_btn_hover.png" PressedUrl="images/Play_btn_pressed.png" />
        </telerik:RadImageButton>
        <telerik:RadImageButton CssClass="btnNext" ID="btnNext" runat="server" Width="35px" Height="35px" AutoPostBack="false" AccessKey="F" TabIndex="3"
            OnClientClicked="telerikDemo.OnClientClicked">
            <Image Url="images/Next_btn_normal.png" HoveredUrl="images/Next_btn_hover.png" PressedUrl="images/Next_btn_pressed.png" />
        </telerik:RadImageButton>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance