Skip to main content

jQuery Convert Text to Uppercase/Lowercase

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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');

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.