jQuery plugin for Uppercase, lowercase, title case and pascal case

In one of my post, I had posted "how to convert text to UpperCase using jQuery". But today, I have created my first jQuery plugin called "Setcase". The beauty of this plugin is that this plugin can be used to convert text to uppercase, lowercase, title case and pascal case.

Features

• It makes use of some of the jQuery/javascript methods to convert the text.
• Supports Uppercase, Lowercase, Titlecase and Pascalcase
• Converts text to case as user types
• Very lightweight and easy to configure.
• Browser Independent

Demo

How to use it?

To use this plugin, first you need to reference jQuery.js file and also add reference of Setcase.js plugin.

<script type="text/javascript" src="http://jquery-blog-js.googlecode.com/files/SetCase.js"> </script> 

This plugin can be used for textbox and you need to set the case which you want to implement on textbox. All you need to do is to set "caseValue" property value to one of the following value.

• upper
• lower
• title
• pascal

Note: All the values are in lower case.

Upper case:

$(function() {     $("#txtUpper").Setcase({caseValue : 'upper'}); }); 

Lower case:

$(function() {     $("#txtLower").Setcase({caseValue : 'lower'}); }); 

Title case: First letter of entered text is capital and rest are in lower case.

$(function() {     $("#txtTitle").Setcase({caseValue : 'title'}); }); 

Pascal case: Every first letter of the word is set to capital.

$(function() {     $("#txtPascal").Setcase({caseValue : 'pascal'}); }); 

Below is the code for plugin. This plugin takes advantage of keypress and blur method on the textbox.

(function($) {   //Create plugin named Setcase  $.fn.Setcase = function(settings) {         // Defaults   var config = {    caseValue: 'Upper'   };      //Merge settings   if(settings) $.extend(config, settings);     this.each(function() {         //keypress event      $(this).keypress(function(){       if(config.caseValue == "upper")    {     var currVal = $(this).val();     $(this).val(currVal.toUpperCase());    }    else if(config.caseValue == "lower")    {     var currVal = $(this).val();     $(this).val(currVal.toLowerCase());    }    else if(config.caseValue == "title")    {        var currVal = $(this).val();     $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());    }    else if(config.caseValue == "pascal")    {        var currVal = $(this).val();     currVal = currVal.toLowerCase().replace(/b[a-z]/g, function(txtVal) {      return txtVal.toUpperCase();     });     $(this).val(currVal);    }         });         //blur event        $(this).blur(function(){        if(config.caseValue == "upper")    {     var currVal = $(this).val();     $(this).val(currVal.toUpperCase());    }    else if(config.caseValue == "lower")    {     var currVal = $(this).val();     $(this).val(currVal.toLowerCase());    }    else if(config.caseValue == "title")    {        var currVal = $(this).val();     $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());    }    else if(config.caseValue == "pascal")    {        var currVal = $(this).val();     currVal = currVal.toLowerCase().replace(/b[a-z]/g, function(txtVal) {      return txtVal.toUpperCase();     });     $(this).val(currVal);    }      });  });  }; })(jQuery); 

See live Demo and Code

You can also download the plugin from below link.

Download Plugin

This is the first plugin which I have created. I hope you liked it and find it pretty useful.

http://jsbin.com/ulaluc/edit#source

Feel free to contact me for any help related to jQuery, I will gladly help you.