ImageButton - Keyboard Support

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?