Force uppercase characters?

[Rick]

How can I force a textbox to make all letters uppercase?

[Dimo]

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.

[Rick]

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

[Princy]

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.

[Rick]

Hi Princy,

Why do we have to use the SetTimeout function to achieve this?

[benitolopez_sistemas]

.

[Jonathan]

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

[John]

I know this is an old post but I found this an awesome solution!

[Chamara]

[quote]John said:I know this is an old post but I found this an awesome solution![/quote]

can you tell us also your awesome solution?