jQuery plugin for 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.