Learning jQuery

In this post, find jQuery code to convert the input type text to UPPER CASE, lower case, Title case and Pascal Case. The case conversion is done once the focus is out from the input text box. However, you can use keypress event also to show the conversion in real time.

Here is the code to convert to UPPER CASE. There is a JavaScript string function called “toUpperCase”, which is used to convert text to UPPER CASE.

$('#txtVal').blur(function() {

  var currVal = $(this).val();

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

});

Similar to UPPER CASE, JavaScript also has toLowerCase() method to convert text to lower case. See below code to convert text to lower case.

$('#txtVal').blur(function() {

  var currVal = $(this).val();

  $(this).val(currVal.toLowerCase());

});

Below is the code snippet to convert text to Title case. In Title case, the very first letter of statement is in upper case and others are in lower case. The code snippet below finds the very first letter, then converts it to UPPER CASE and rest letters to lower case.

$('#txtVal').blur(function() {

  var currVal = $(this).val();

  $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());

});

And finally, the below code converts text to Pascal Case. In Pascal Case, first letter of the every word is in UPPER CASE and rest are in lower case. First we convert all in lower case and then find the first letter of every word.  To find out the first letter of every word, regular expression is used and then we convert it into UPPER CASE.

$('#txtVal').blur(function() {

   var currVal = $(this).val();

   currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {

      return txtVal.toUpperCase();

   });

   $(this).val(currVal);

});