This is a migrated thread and some comments may be shown as answers.

RadInput - OnKeyPress

9 Answers 748 Views

Input

This is a migrated thread and some comments may be shown as answers.

Scott asked on 26 Jan 2009, 10:10 PM

I'm wondering why RadInput only exposes one event for key presses? It seems like it should mirror the functionality of other events. Namely, it seems like there should be two events - OnKeyPressing (fires before new value is set and can be cancelled) and OnKeyPressed (fires after new value has been set).

I'm trying to implement a search box and I want the results to appear automatically as the user types into the RadTextBox. I can't use OnKeyPress because it doesn't fire when the backspace or delete keys are pressed. Even if it did, the value of the textbox hasn't been updated yet so it still wouldn't work. I need "OnKeyPressed" that fires any time any key is pressed and contains the new value of the input control.

Alternately, it might be nice if OnValueChanged actually fired when the value changed instead of when the control loses focus (isn't that what OnBlur is for?).

9 Answers, 1 is accepted

answered on 27 Jan 2009, 09:32 AM

Hello Scott,

There can be no sensible "OnKeyPressing" event handler, because there is no real browser event to which this handler can be attached.

However, you can use KeyDown - it is fired before KeyPress. By the way, bear in mind that the KeyPress event firing is inconsistent in different browsers - Internet Explorer, Chrome and Safari do not fire it for special keys (such as backspace, arrows, etc), while Firefox and Opera do.

Here is an example demonstating usage of the KeyDown event. You will notice that the event handling is not carried out by the RadTextBox API - we do not have a public method for handling this event. We may consider implementing one for a future version.

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>event sequence:</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <p>RadTextBox</p> 
        
            <telerik:RadTextBox ID="RadTextBox1" runat="server" onkeydown="return KeyDown(event)"> 
        
                <ClientEvents OnKeyPress="KeyPress" /> 
        
            </telerik:RadTextBox> 
        
            <script type="text/javascript"> 
        
            function KeyDown(e) 
        
            { 
        
                document.title += " KeyDown"; 
        
                //return false; 
        
            } 
        
            function KeyPress(sender, args) 
        
            { 
        
                document.title += " KeyPress"; 
        
            } 
        
            </script> 
        
            <p>Standard TextBox</p> 
        
            <input type="text" onkeydown="return KeyDown(event)" onkeypress="KeyPress(this, event)" /> 
        
            </form> 
        
            </body> 
        
            </html>

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 27 Jan 2009, 03:29 PM

I'm trying to implement a search box and I want the results to appear automatically as the user types into the RadTextBox. I can't use OnKeyPress because it doesn't fire when the backspace or delete keys are pressed. Even if it did, the value of the textbox hasn't been updated yet so it still wouldn't work. I need "OnKeyPressed" that fires any time any key is pressed and contains the new value of the input control.

Alternately, it might be nice if OnValueChanged actually fired when the value changed instead of when the control loses focus .

I don't see how OnKeyDown would help me either. I want the "new" value of the text box, and I want it immediately when the value changes. To see what I mean, look at the auto-complete feature on Google. In the Google searchbox, type in "teler" and watch the "suggestions" change as you type. Then, start pressing the backspace key - the suggestions changes as you remove text too! Yahoo! does the same thing. So does Ask.com.

I noticed that the RadComboBox fails to handle the backspace key too.
http://demos.telerik.com/aspnet-ajax/Combobox/Examples/Functionality/AutoCompleteClientSide/DefaultCS.aspx

answered on 30 Jan 2009, 04:05 PM

Hi Scott,

In order to retrieve a standard asp:TextBox value on the KeyDown or KeyPress event, you will have to construct it manually, because at that time the updated value is not available via the standard browser and Javascript methods. RadInput textboxes could do that automatically, but I am afraid such a feature has not been implemented yet. Here is an example, which should be a good enough guideline for you:

    
            <%@ Page Language="C#" %>  
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
        
            <!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">  
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
        
            <title>[]</title>  
        
            </head>  
        
            <body>  
        
            <form id="form1" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
        
            <p>RadTextBox</p>  
        
            <telerik:RadTextBox 
        
                ID="RadTextBox1" 
        
                runat="server" 
        
                onkeydown="return KeyDown(event)" /> 
        
            <script type="text/javascript">  
        
            var textBox = $get("<%= RadTextBox1.ClientID %>_text"); 
        
            var textBoxValue = ""; 
        
            function KeyDown(e) 
        
            { 
        
                if (e.keyCode == 8) // backspace 
        
                { 
        
                    if (textBoxValue.length > 0) 
        
                    { 
        
                        textBoxValue = textBox.value.substr(0, textBox.value.length - 1); 
        
                    } 
        
                } 
        
                else if (e.keyCode >= 48 && e.keyCode <= 90) // alpha-numeric characters 
        
                { 
        
                    textBoxValue = textBox.value + String.fromCharCode(e.keyCode); 
        
                } 
        
                document.title = textBoxValue.toLowerCase(); 
        
            } 
        
            </script> 
        
            </form>  
        
            </body>  
        
            </html>

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 30 Jan 2009, 04:43 PM

"RadInput textboxes could do that automatically, but I am afraid such a feature has not been implemented yet."

That's what I was afraid of. I think that would be a very good feature, and it would probably help the auto-complete feature of the combobox work better too.

Your example is nice, but incomplete. What if the user moves the cursor to the middle of a word and presses the "Delete" key? What if the user selects several characters with the mouse and deletes them all with a single keystroke? What if the user removes text with CTRL-X? Or the "Cut" context menu? And, most importantly, how do I handle all of these in a cross-browser fashion?

This is not a complaint, just a plea for this feature to be added to the input controls. I think it's a fairly complicated issue (and therefore difficult for users to implement a simple work-around) but with the growing popularity of auto-complete features it would be well received.

answered on 12 Oct 2011, 01:49 PM

Hello,

It turns out that such functionality could not be achieved, because of general limitations. The HTML Input element has 3 keyboard DOM events: onkeydown, onkeypress, and onkeyup.

onkeydown fires before keypress, when a key on the keyboard is pressed.
onkeypress fires after keydown, when a key on the keyboard is pressed or hold. This means that if the user holds a key for a while, onkeypress will fire several times.
onkeyup fires when a key on the keyboard is released.

On onkeydown event we could not say how much time the user will hold the key, and because of this we could not say what will be the updated text.

As an alternative for showing autocomplete/autosuggest options onkeyup DOM event of the input can be used.

Greetings,
Vasil
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now