Force uppercase characters?

8 posts, 0 answers
  1. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2009 Link to this post

    How can I force a textbox to make all letters uppercase?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 15 Apr 2009 Link to this post

    Hi Rick,

    Yes, you can.

    By using the control's API you can take the current value, use the toUpperCase() Javascript method to transform it and set it back as the control's value.

    http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html

    http://www.telerik.com/help/aspnet-ajax/input_clientsideradtextbox.html

    http://www.telerik.com/help/aspnet-ajax/input_clientsideevents.html

    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2009 Link to this post

    Thanks Dimo,

    I can see how it works on the ValueChanged/ValueChanging events, but these only work after the textbox loses focus.

    Ideally I would want to catch the keypresses themselves and convert them to uppercase. The following example seems close, but there doesn't seem an option to set_keyCharacter() in the following example.

    http://www.telerik.com/help/aspnet-ajax/input_clientsideonkeypress.html
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Apr 2009 Link to this post

    Hello Rick,

    Try out the following code snippet and see whether it working as you expected.

    ASPX:
     
    <telerik:RadTextBox ID="RadTextBox1"  runat="server">  
     <ClientEvents OnKeyPress="UpperCaseOnly" /> 
    </telerik:RadTextBox> 

    JavaScript:
     
    <script type="text/javascript">  
    function UpperCaseOnly(sender, eventArgs)  
    {      
        var c = eventArgs.get_keyCode();  
        if (c<65 || c>90)       
            window.setTimeout("$find('<%= RadTextBox1.ClientID %>').SetTextBoxValue($find('<%= RadTextBox1.ClientID %>').GetTextBoxValue().toUpperCase());",50);                
    }  
    </script> 

    Thanks,
    Princy.
  6. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2009 Link to this post

    Hi Princy,

    Why do we have to use the SetTimeout function to achieve this?
  7. benitolopez_sistemas
    benitolopez_sistemas avatar
    25 posts
    Member since:
    Jan 2007

    Posted 15 May 2010 Link to this post

    .
  8. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 26 Dec 2010 Link to this post

    Y'know, a far simpler solution is to:

    1. Create a CSS style:

    .allcaps
        text-transform: uppercase
    }

    2. Set your input field to that CSS style:

    <input id="Text1" class="allcaps" type="text" />

    If you're doing this for a RadGrid autogenerated textbox field, ensure that you:

    2a. add a GridTextBoxColumnEditor to your form;
    2b. set it to use the allcaps CSS class you created in step 1 then;
    2c. Set the RadGrid column's ColumnEditorID property in the RadGrid property builder to this GridTextBoxColumnEditor.

    This will give your input text an ALL CAPS look as the user types, even if Caps Lock is not enabled on the keyboard.

    3. Finally, update your input field to use its own value as uppercase:

    TextBox1.Text = TextBox1.Text.ToUpper()

    This will work even on RadGrid input fields. Just put the code in step #3 in the RadGrid.InsertCommand event.

    Enjoy.
    Jonathan
  9. John
    John avatar
    1 posts
    Member since:
    Dec 2015

    Posted 27 Jul in reply to Jonathan Link to this post

    I know this is an old post but I found this an awesome solution!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017