How to change lowercase chars to uppercase using the 'keyup' event?

Question

My goal is to use the jQuery event .keyup() to convert inputted lowercase chars to uppercase.

How can I achieve this?

Answer 1

Plain ol' javascript:

var input = document.getElementById('inputID');

input.onkeyup = function(){
    this.value = this.value.toUpperCase();
}

Javascript with jQuery:

$('#inputID').keyup(function(){
    this.value = this.value.toUpperCase();
});

Answer 2

The only issue with changing user input on the fly like this is how disconcerting it can look to the end user (they'll briefly see the lowercase chars jump to uppercase).

What you may want to consider instead is applying the following CSS style to the input field:

text-transform: uppercase;

That way, any text entered always appears in uppercase. The only drawback is that this is a purely visual change - the value of the input control (when viewed in the code behind) will retain the case as it was originally entered.

Simple to get around this though, force the input val() .toUpperCase(); then you've got the best of both worlds.

Answer 3

Above answers are pretty good, just wanted to add short form for this

 <input type="text" name="input_text"  onKeyUP="this.value = this.value.toUpperCase();">

Answer 4

$(document).ready(function()
{
    $('#yourtext').keyup(function()
    {
        $(this).val($(this).val().toUpperCase());
    });
});

<textarea id="yourtext" rows="5" cols="20"></textarea>

Answer 5

Let say your html code is :

<input type="text" id="txtMyText" />

then the jquery should be :

$('#txtMyText').keyup(function() {
  this.value = this.value.toUpperCase();
});

Answer 6

As placeholder text is becoming more commonly supported, this update may be relevant.

My issue with the other answers is that applying the text-transform: uppercase css would also uppercase the placeholder text, which we didn't want.

To work around this, it was a little tricky but worth the net effect.

1. Create the text-uppercase class.

   .text-uppercase {
       text-transform:uppercase;
   }
   

2. Bind to the keydown event.

   Binding to the keydown event was important to get the class to be added before the character was visible. Binding to keypress or keyup left the brief flicker of the lowercase letter.

   $('input').on('keydown', function(e)
   {
       // Visually Friendly Auto-Uppercase
       var $this = $(this);
   
       // 1. Length of 1, hitting backspace, remove class.
       if ($this.val().length == 1 && e.which == 8)
       {
           $this.removeClass('text-uppercase');
       }
   
       // 2. Length of 0, hitting character, add class.
       if ($this.val().length == 0 && e.which >= 65 && e.which <= 90)
       {
           $this.addClass('text-uppercase');
       }
   });
   

3. Transform to uppercase when submitting to server.

   var myValue = this.value.toUpperCase();
   

YMMV, you may find that cutting text or deleting text with the delete key may not remove the class. You can modify the keydown to also take the delete character into account.

Also, if you only have one character, and your current cursor position is in position 0, hitting backspace will remove the text-transform class, but since the cursor position is in position 0, it doesn't delete the single character.

This would require a bit more work to also check the current character position and determine if the delete or backspace key will actually delete the single remaining character.

Although it was worth the extra effort to make this seemless and visually appealing for our most common use case, going beyond this wasn't necessary. :)

Answer 7

Solution 1 (Elegant approach with great user experience)

HTML

<input id="inputID" class="uppercase" name="inputName" value="" />

CSS

.uppercase{
    text-transform: uppercase;
}

JS

$('#inputID').on('blur', function(){
    this.value = this.value.toUpperCase();
});

By using CSS text-transform: uppercase; you'll eliminate the animation of lower to uppercase as the user types into the field.

Use blur event to handle converting to uppercase. This happens behind the scene as CSS took care of the user's visually appealing masking.

Solution 2 (Great, but less elegant)

If you insist on using keyup, here it is...

$('#inputID').on('keyup', function(){
    var caretPos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(caretPos, caretPos);
});

User would notice the animation of lowercase to uppercase as they type into the field. It gets the job done.

Solution 3 (Just get the job done)

$('#inputID').on('keyup', function(){
    this.value = this.value.toUpperCase();
});

This method is most commonly suggested but I do not recommend.

The downside of this solution is you'll be annoying the user as the cursor's caret position keeps jumping to the end of the text after every key input. Unless you know your users will never encounter typos or they will always clear the text and retype every single time, this method works.

Answer 8

jQuery:

var inputs = $('#foo');

inputs.each(function(){
          this.style.textTransform = 'uppercase';
       })
       .keyup(function(){
          this.value = this.value.toUpperCase();
       });

---

1. Set the input's style to capitals (so user doesn't see the change)
2. Automatically adjust the value (so the user doesn't have to hold shift or use caps lock)

Answer 9

This worked for me

jQuery(document).ready(function(){ 
        jQuery('input').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
        jQuery('textarea').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
 });

Answer 10

I success use this code to change uppercase

$(document).ready(function(){
$('#kode').keyup(function()
{
    $(this).val($(this).val().toUpperCase());
});
});
</script>

in your html tag bootstraps

<div class="form-group">
                            <label class="control-label col-md-3">Kode</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input name="kode" placeholder="Kode matakul" id="kode" class="form-control col-md-7 col-xs-12" type="text" required="required" maxlength="15">
                                <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                            </div>
                        </div>

Answer 11

There are many ways to get this done as shown above answers. CSS: Directly using style="text-transform:uppercase;" in HTML tag would be fastest way without even showing the original character pressed. However, this will make everything uppercase in that tag. For instance, camel case place holder in input field will be uppercase as well.

Next cleaner version would be JS in HTML tag;

<input type="text" onkeyup="this.value = this.value.toLowerCase();">

OR

<input type="text" onkeyup="$(this).val($(this).val().toLowerCase());">

Answer 12

I work with telerik radcontrols that's why I Find a control, but you can find control directly like: $('#IdExample').css({

this code works for me, I hope help you and sorry my english.

Code Javascript:

<script type="javascript"> 
function changeToUpperCase(event, obj) {
var txtDescripcion = $("#%=RadPanelBar1.Items(0).Items(0).FindControl("txtDescripcion").ClientID%>");
             txtDescripcion.css({
                 "text-transform": "uppercase"
             });
} </script>

Code ASP.NET

<asp:TextBox ID="txtDescripcion" runat="server" MaxLength="80" Width="500px"                                                             onkeypress="return changeToUpperCase(event,this)"></asp:TextBox>

Answer 13

Make sure that the field has this attribute in its html.

ClientIDMode="Static"

and then use this in your script:

$("#NameOfYourTextBox").change(function () {
                 $(this).val($(this).val().toUpperCase());
             });