RadInput - OnKeyPress

10 posts, 0 answers
  1. Scott
    Scott avatar
    23 posts
    Member since:
    Mar 2008

    Posted 26 Jan 2009 Link to this post

    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?).
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott
    Scott avatar
    23 posts
    Member since:
    Mar 2008

    Posted 27 Jan 2009 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jan 2009 Link to this post

    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.
  6. Scott
    Scott avatar
    23 posts
    Member since:
    Mar 2008

    Posted 30 Jan 2009 Link to this post

    "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.

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jan 2009 Link to this post

    Hello Scott,

    I have logged your feature request. Thanks.

    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2011 Link to this post

    What is the request ID? Has it been done yet?
  9. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 17 Aug 2011 Link to this post

    This functionality is currently not provided by RadInput. Unfortunately, we cannot give any specific deadlines or even a confirmation that it will be implemented. Here is a link to the item in our new Public Issue Tracking System, where you and other users can vote for this feature and have an influence on the decision.

    Greetings,
    Veli
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 17 Aug 2011 Link to this post

    Thanks!
  11. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 12 Oct 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017