Learning jQuery

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.
• Option to change the cases on focus out. This is important as with keypress event, when you put cursor in between a word and start typing, character is being added at end.
• 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="https://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'});
});

By default, this plugin changes the case as user types. There is an option "changeonFocusout", which allows to override default setting and changes case once the focus moves out of textbox.

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

You can also download the plugin from below link.

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