ASPxClientTextEdit.KeyDown Event
Occurs on the client-side when an end-user presses a key while the editor has focus.
Declaration
KeyDown: ASPxClientEvent<ASPxClientEditKeyEventHandler<ASPxClientTextEdit>>
Event Data
The KeyDown event's data class is ASPxClientEditKeyEventArgs.
The following properties provide information specific to this event:
| Property |
Description |
| htmlEvent |
Gets a DHTML event object that relates to the processed event.
|
The editors’ client-side functionality provides the ability to respond to key presses and releases made by end users. Each time an end-user presses a key while an editor has focus, the KeyDown event fires. This event can be handled to implement custom processing of the pressed key.
Using the ASPxClientEditKeyEventArgs.htmlEvent property of the event’s argument, you can obtain the necessary information related to the pressed key (such as its key code, the modifier key pressed, etc).
Note
The GetText method returns a string calculated based on a current editor’s value and the editor’s formatting settings (mask settings, the DisplayFormatString and EditFormatString properties, etc.). In this case, it is required to synchronize a text entered by an end user with an editor’s value before you use the GetText method. For example, if an editor loses focus, the editor automatically calculates (synchronizes) its value based on the entered text.
The GetText method returns an empty value or a previous editor’s text if you call this method before the editor calculates its a new editor’s value. For example, in the client-side UserInput, KeyDown, KeyPress, KeyUp event handlers, this method will return an empty value or a previous editor’s text. In this case, obtain an editor’s text directly from the editor’s input element:
function OnUserInput(s, e) {
var currentText = s.GetInputElement().value;
}
See also: Bug Report: ASPxTextBox - The client-side GetText method returns an empty value if a text decoration (for example, a null text) is applied to editor
Example
This example illustrates how to emulate the Tab key using the Enter key.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load (object sender, EventArgs e) {
}
protected void btn_Click (object sender, EventArgs e) {
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to navigate between editors by pressing the Enter key like by the Tab key
</title>
<script type="text/javascript">
function DoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Focus the first editor and press the Enter key
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="tb1" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb2'); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" ClientInstanceName="tb2" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb3'); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox3" runat="server" ClientInstanceName="tb3" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, ''); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxButton ID="btn" runat="server" AutoPostBack="False" ClientInstanceName="btn" UseSubmitBehavior="true"
OnClick="btn_Click" Text="Do PostBack">
</dx:ASPxButton>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to navigate between editors by pressing the Enter key like by the Tab key
</title>
<script type="text/javascript">
function DoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Focus the first editor and press the Enter key
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="tb1" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb2');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" ClientInstanceName="tb2" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb3');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox3" runat="server" ClientInstanceName="tb3" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, '');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxButton ID="btn" runat="server" AutoPostBack="False" ClientInstanceName="btn" UseSubmitBehavior="true"
OnClick="btn_Click" Text="Do PostBack">
</dx:ASPxButton>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
End Class
See Also