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

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());
             });

Answer 2

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

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 5

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 6

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>