Custom Key Handling
The Telerik UI for ASP.NET MVC OTPInput wrappers expose the KendoKeydown event, which lets you intercept keyboard input before the built-in handler runs and customize how it responds to specific shortcuts.
For event details and the full list of supported wrappers, refer to Custom Key Handling Overview.
How It Works
When the OTPInput receives keyboard input, the KendoKeydown event fires before the built-in handler.
Use the following configuration to subscribe to the event:
.Events(events => events.KendoKeydown("onOTPInputKendoKeydown"))
Overriding a Built-In Key Combination
The following example shows the pattern for overriding a built-in shortcut of the OTPInput. Replace kendo.keys.ENTER with one of the built-in shortcuts that you want to take over.
function onOTPInputKendoKeydown(e) {
if (e.keyCode === kendo.keys.ENTER) {
e.preventKendoKeydown = true;
console.log("Built-in shortcut overridden.");
}
}
Adding a Custom Key Combination
The following example demonstrates how to add a new Ctrl+Shift+X shortcut for the OTPInput.
function onOTPInputKendoKeydown(e) {
if (e.ctrlKey && e.shiftKey && e.keyCode === 88) {
console.log("Custom shortcut activated.");
}
}
Built-In Keyboard Shortcuts
For the full list of built-in keyboard shortcuts, see the OTPInput Keyboard Navigation Demo and the Keyboard Navigation article.