Auto-Convert Text To Different Cases Using jQuery
jQuery By Example’s author created this neat plugin for automatically converting your text to upper, lower, title, and pascal case. The auto feature is just half of it, the other half is that it converts your text in REAL-TIME!
Check out the live demo here or take a look at its code here.
First thing you need to do is reference the necessary jQuery file and plugin by inserting this into your code:
| <script type=”text/javascript”
src=”https://sites.google.com/site/jquerybyexample/SetCase.js”> </script> |
You can use this plugin for the textbox element; all you need to do is to set the case which you want to implement by setting the “caseValue” property to upper, lower, title, or pascal. (NOTE: All values are in lower case).
Your code should then look like one of the following:
Upper case:
| $(function() {
$(“#txtUpper”).Setcase({caseValue : ‘upper’}); }); |
Lower case:
| $(function() {
$(“#txtLower”).Setcase({caseValue : ‘lower’}); }); |
Title case: Only the very first letter of the entire text is capitalized.
| $(function() {
$(“#txtTitle”).Setcase({caseValue : ‘title’}); }); |
Pascal case: Every first letter of the word is capitalized.
| $(function() {
$(“#txtPascal”).Setcase({caseValue : ‘pascal’}); }); |
Below is the code for the plugin, which takes advantage of the keypress and blur method:
| (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); |
Hope you enjoy trying this plugin out on your site. Cheers!
0
509
1 Comment
jQuery By Example
03.27.2012
Thanks for writing article for my plugin.
There are no trackbacks to display at this time.