How can I force input to uppercase in an asp.net textbox?

Question

I'm writing an asp.net application. I have a textbox on a webform and I want to force whatever the user types to upper case. I'd like to do this on the front end. You should also note that there is a validation control on this textbox, so I want to make sure the solution doesn't interfere with the asp.net validation.

Clarification: It appears that the CSS text-tranform makes the user input appear in uppercase, however under the hood, it's still lower case as the validation control fails. You see, my validation control checks to see if a valid state code is entered, however the regex expression I"m using only works with uppercase characters.

Answer 1

Use a css style on the text box. Your css should be something like this:

.uppercase { text-transform: uppercase; }

<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>

Answer 2

Set the style on the textbox as text-transform: uppercase?

Answer 3

Javascript has the "toUpperCase()" function of a string.

So, something along these lines:

function makeUpperCase(this)
{
this.value = this.value.toUpperCase();
}

Answer 4

 style='text-transform:uppercase'

Answer 5

CSS could be of help here.

style="text-transform: uppercase";"

does this help?

Answer 6

Use the text-transform CSS for the front-end and then use the toUpper method on your string server-side before you validate.

Answer 7

I just did something similar today. Here is the modified version:

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<script type="text/javascript">
    function setFormat() {
        var inp = document.getElementById('ctl00_MainContent_txtInput');
        var x = inp.value;
        inp.value = x.toUpperCase();
    }

    var inp = document.getElementById('ctl00_MainContent_txtInput');
    inp.onblur = function(evt) {
        setFormat();
    };
</script>

Basically, the script attaches an event that fires when the text box loses focus.

Answer 8

Why not use a combination of the CSS and backend? Use style='text-transform:uppercase' on the TextBox, and in your codebehind use Textbox.Value.ToUpper();

You can also easily change your regex on the validator to use lowercase and uppercase letters. That's probably the easier solution than forcing uppercase on them.

Answer 9

You can intercept the key press events, cancel the lowercase ones, and append their uppercase versions to the input:

window.onload = function () {
    var input = document.getElementById("test");

    input.onkeypress = function () {
        // So that things work both on FF and IE
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?    
        if (/[a-z]/.test(char)) {
            // Append its uppercase version
            input.value += char.toUpperCase();

            // Cancel the original event
            evt.cancelBubble = true;
            return false;
        }
    }
};

This works in both FF & IE. You can see it in action here.

Answer 10

<!-- Script by hscripts.com -->
<script language=javascript>
function upper(ustr)
{

    var str=ustr.value;
    ustr.value=str.toUpperCase();
}

function lower(ustr)
{

    var str=ustr.value;
    ustr.value=str.toLowerCase();
}


</script> 
<form>
Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea>
</form>

<form>
Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea>
</form>

Answer 11

I would do this using jQuery.

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#txt").keydown(function(e) {
            if (e.keyCode >= 65 & e.keyCode <= 90) {
                val1 = $("#txt").val();
                $("#txt").val(val1 + String.fromCharCode(e.keyCode));
                return false;
            }
        });
    });
</script>

You must have the jquery library in the /script folder.

Answer 12

**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**

Answer 13

I realize it is a bit late, but I couldn't find a good answer that worked with ASP.NET AJAX, so I fixed the code above:

function ToUpper() {
        // So that things work both on FF and IE
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // convert to uppercase version
            if (evt.which) {
                evt.which = char.toUpperCase().charCodeAt(0);
            }
            else {
                evt.keyCode = char.toUpperCase().charCodeAt(0);
            }
        }

        return true;
    }

Used like so:

       <asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server" 
             Width="84px" Font-Names="Courier New"></asp:TextBox>