jQuery Convert Text to Uppercase/Lowercase

Sam Deering

jQuery Code Snippets to convert text on a web page to uppercase or lowercase. Could be useful for changing text styles on your web page without using css (although there is a css example below also).

Uppercase/Lowercase using jQuery

//Lowercase
$('jqueryselector').val($(this).val().toLowerCase());
 
//Uppercase
$('jqueryselector').val($(this).val().toUpperCase());

Capitalize using CSS

If you wanted to capitalise first letter of each word you could do this by using CSS.

.capitalise
{
    text-transform:capitalize;
}

Then attach it to the element.

$('jqueryselector').addClass('capitalise');

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Lora

    I didn’t know the CSS trick for capitalization of text.

    I was looking for a plugin which can be used for all kind of cases rather then writing code for every case. There are many plugins available for uppercase and not a single plugin which work for upper and lower as well.

    After hours of googling, I found a plugin “Setcase” which can be used for lower, upper, title and pascal case as well.. Exactly what I was looking for..

    http://jquerybyexample.blogspot.com/2011/12/jquery-plugin-for-uppercase-lowercase.html

  • Jeferson

    capitalise

    CAPITALISE

    CAPITALISEEE!!!!!!!!!!

    capitalize

  • Guest

    @sam

    Why did you suggest

    $(‘jqueryselector’).val($(this).val().toLowerCase());

    instead of

    $(‘jqueryselector’).val().toLowerCase();