New to Kendo UI for jQuery? Download free 30-day trial

jQuery SmartPasteButton Keyboard Navigation

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

keyboard-navigation.html

Also available for:

API REFERENCE

Birthday Card

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

$(document).ready(function () { $("#copyButton").kendoButton({ fillMode: "clear", click: onClick }); $("#loader").kendoLoader({ size: "large", type: "converging-spinner", visible: false }); $("#overviewForm").kendoForm({ orientation: "vertical", validatable: { validationSummary: false }, buttonsTemplate: "<button id='clearButton' type='reset' onclick='onClear()' " + "data-role='button' class='k-button k-button-md k-rounded-md k-button-flat k-button-flat-base' " + "role='button' aria-disabled='false' tabindex='0'>" + "<span class='k-icon k-font-icon k-i-arrow-rotate-ccw'></span>" + "</button>", items: [ { field: "FullName", label: "Full Name", editor: "TextBox", editorOptions: { placeholder: "e.g. John Doe" } }, { field: "StreetAddress", label: "Address", editor: "TextBox", editorOptions: { placeholder: "e.g. London" } }, { field: "BirthDate", label: "Birth Date", editor: "DatePicker", attributes: { placeholder: "e.g. XX/XX/XX" } } ], smartPaste: { text: "Smart Paste", service: "https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste", requestStart: onRequestStart, requestEnd: onRequestEnd } }); $("#overviewForm input").on("change", function () { var input = $(this); var wrapper = input.closest(".k-input"); var currInputValue = this.value; if (currInputValue == "") { setTimeout(function () { wrapper.removeClass("k-valid"); input.removeClass("valid"); }, 0); } }); $(document).keydown(function (e) { if (e.altKey && e.keyCode === 87) { $(".k-smart-paste-button").focus(); } }); }); function onClick(e) { const element = document.getElementById("editorContent"); const range = document.createRange(); range.selectNodeContents(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); navigator.clipboard.writeText(selection.toString()); $(e.sender.element).find(".k-button-text").text("Text Copied"); } function onRequestStart() { kendoConsole.log("Request Start"); $("#loader").data("kendoLoader").show(); $("#copyButton").find(".k-button-text").text("Copy"); clearSelection(); } function onRequestEnd() { kendoConsole.log("Request End"); $("#loader").data("kendoLoader").hide(); $("#BirthDate").blur(); } function onClear() { $(".k-input").removeClass("k-valid"); clearSelection(); $("#copyButton").find(".k-button-text").text("Copy"); $("input").removeClass("k-valid"); } function clearSelection() { var selection = window.getSelection(); if (selection && selection.rangeCount > 0) { selection.removeAllRanges(); } } img { width: 255px; height: 165px; } .content-footer { position: relative; top: 30px; right: 20px; } #presentWrapper { width: 300px; } .editor-body { padding: 20px; } .smartpaste-container { position: relative; } .smartpaste-title { position: absolute; top: -38px; font-weight: 600; font-size: 22px; color: #d7d7d7; margin: 0; } .present-copy { font-size: 14px; font-style: italic; padding-top: 0; padding-left: 65px; } .k-button-clear:after { content: none }

Description

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features–it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

The SmartPasteButton keyboard navigation is enabled by default, as demonstrated in this demo.

This SmartPasteButton example is part of the Kendo UI for jQuery demos collection.

The SmartPasteButton supports the following keyboard shortcuts:

Focus

Alt + W Focuses the SmartPasteButton.

Supported Keys and User Actions

Enter or Space Activates the button and starts the Smart Paste operation.

Description

Focus

Supported Keys and User Actions

Related Documentation

Support & Learning Resources

Additional Resources