Convert to uppercase as user types using javascript

Question

I want to convert lowercase chars to uppercase as the user types using javascript. Any suggestions are welcome.

I have tried the following:

$(\"#text         


        

Answer 1

function changeToUpperCase(event,obj) {
    charValue = (document.all) ? event.keyCode : event.which;
    if (charValue!="8" && charValue!="0" && charValue != "27"){
        obj.value += String.fromCharCode(charValue).toUpperCase();
        return false;
    }else{
        return true;
    }
}

<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />

Edit:

The most simplest way is by using css:

#txtId {text-transform:uppercase}

Answer 2

try this css script it's work for me.

<style>    
input{text-transform:uppercase};
</style>    

for information, what you see maybe upper case but it's actually still what you type like if you type "Test" it shown as "TEST" but when your get by val() it shown as "Test".

if you want to make it be upper case for real then add some script below on event like blur from the object or elenent as you need.

$(this).val($(this).val().toUpperCase());

And if you want to use for specific object add some extra script like what i used by now

input[attr]{
text-transform:uppercase;
}

input[attr='value']{
text-transform:uppercase;
}

Answer 3

I know I'm quite late to the party, but I'd like to offer this:

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css('text-transform', 'uppercase');
    } else {
      $element.css('text-transform', 'none');
    }
  };

  $.fn.displayAsUppercase = function() {
    $(this).each(function() {
        var $element = $(this);
      displayUppercase($element);
      $element.on('input', function(){displayUppercase($element)});
    });
    return this;
    };

}( jQuery ));

It has these advantages:

• Keeps the placeholder capitalization intact
• Capitalizes the input immediately (on keydown)
• Doesn't move the cursor
• Capitalizes the value of the input if it's prepopulated

JS Fiddle here

Answer 4

This might be a nice workaround. Just set this in your CSS:

input#textbox {
    text-transform: uppercase;
}

If you post the data to a server side script (lets say php) you can always do something like this:

$upper_data = strtoupper($_POST['textbox']);

Answer 5

$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});

Answer 6

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(){
        return $("#id").toUpperCase();
    }));
});

small correction in the above script this will work perfectly now.