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

Keyboard Navigation

To: Nancy Wheeler
Address: 1470 Cedar Lane
Birth Date: 03/14/1997

The SmartPasteButton supports comprehensive keyboard navigation, allowing users to interact with the component without a mouse. Press Tab to focus the button and Enter or Space to trigger the smart paste action.

To foucs the SmartPasteButton, press Alt and W

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
  • style.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="SmartPasteButton_Accessibility_and_Internationalization_KeyboardNavigation_DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../Overview/style.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></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 flex-center">
        <telerik:RadCard runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="editor-column">
                    <div class="editor">
                        <div class="editor-text-area">
                            <div class="content">
                                <div class="editor-body birthday-card">
                                    <img src="images/present.jpg" class="birthday-image" />
                                    <div class="editor-body-text" id="editorContent">
                                        To: Nancy Wheeler
                                        <br />
                                        Address: 1470 Cedar Lane
                                        <br />
                                        Birth Date: 03/14/1997
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="editor-actions">
                        <telerik:RadButton runat="server" ID="CopyButton1" Text="Copy" AutoPostBack="false" OnClientClicked="onCopyClick" />
                    </div>
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>

        <telerik:RadCard runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="smartpaste-container" id="smartPasteContainer">
                    <div class="form-wrapper">
                        <div class="control-container">
                            <label>Full Name</label>
                            <telerik:RadTextBox runat="server" ID="FullNameTextBox" Width="250" EmptyMessage="e.g. Nancy Wheeler" SmartPasteDescription="Full Name" />
                        </div>
                        <div class="control-container">
                            <label>Address</label>
                            <telerik:RadTextBox runat="server" ID="AddressTextBox" Width="250" EmptyMessage="e.g. 1470 Cedar Lane" SmartPasteDescription="Address" />
                        </div>
                        <div class="control-container">
                            <label>Birth Date</label>
                            <telerik:RadDatePicker runat="server" ID="BirthDatePicker" Width="250" SmartPasteDescription="Birth Date"></telerik:RadDatePicker>
                        </div>
                        <div class="buttonDiv">
                            <telerik:RadButton runat="server" RenderMode="Lightweight" ID="ClearButton" AutoPostBack="false" ToolTip="Clear Inputs" OnClientClicked="onClearClick">
                                <Icon PrimaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                            <telerik:RadSmartPasteButton runat="server" ID="SmartPasteButton1" Text="Smart Paste" ServiceUrl="https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste">
                                <ClientEvents OnRequestStart="onRequestStart" />
                            </telerik:RadSmartPasteButton>
                        </div>
                    </div>
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance