Only Number, Thousand and Decimal Seperators for Currency, To Upper Stuffs in Javascript

You can do very nice things with javascipt in the client side.
In this post, I will explain to convert the text in the input control in different formats.

1. Allow only numbers
2. Allow only numbers, comma and dot and seperate the text in thousands with dot and decimal with comma (You can change this). You see this usage in the online bank pages to input the currencies.
3. Convert to upper the text and also convert the Turkish characters to the closest letter in the alphabet.

For a online demo, you can check this:
http://www.ozayakdora.com/html_text_javascript.html

/*
 * Özay AKDORA
 * 05.01.2009
 */
 
 /*
 *  using by function ThausandSeperator!!
 */
 function removeCharacter(v, ch)
 {
  var tempValue = v+"";
  var becontinue = true;
  while(becontinue == true)
  {
   var point = tempValue.indexOf(ch);
   if( point >= 0 )
   {
    var myLen = tempValue.length;
    tempValue = tempValue.substr(0,point)+tempValue.substr(point+1,myLen);
    becontinue = true;
   }else{
    becontinue = false;
   }
  }
  return tempValue;
 }
 
 /*
 *  using by function ThausandSeperator!!
 */
 function characterControl(value)
 {
  var tempValue = "";
  var len = value.length;
  for(i=0; i<len; i++)
  {
   var chr = value.substr(i,1);
   if( (chr < '0' || chr > '9') && chr != '.' && chr != ',' )
   {
    chr = '';
   }
   
   tempValue = tempValue + chr;
  }
  return tempValue;
 }
 
 /*
 * Automaticly converts the value in the textbox in a currency format with
 * thousands seperator and decimal point
 *
 * @param value : the input text
 * @param digit : decimal number after comma
 */
 function ThausandSeperator(value, digit)
 {
  var thausandSepCh = ".";
  var decimalSepCh = ",";
  
  var tempValue = "";
  var realValue = value+"";
  var devValue = "";
  realValue = characterControl(realValue);
  var comma = realValue.indexOf(decimalSepCh);
  if(comma != -1 )
  {
   tempValue = realValue.substr(0,comma);
   devValue = realValue.substr(comma);
   devValue = removeCharacter(devValue,thausandSepCh);
   devValue = removeCharacter(devValue,decimalSepCh);
   devValue = decimalSepCh+devValue;
   if( devValue.length > 3)
   {
    devValue = devValue.substr(0,3);
   }
  }else{
   tempValue = realValue;
  }

 tempValue = removeCharacter(tempValue,thausandSepCh);
   
  var result = "";
  var len = tempValue.length;
  while (len > 3){
  result = thausandSepCh+tempValue.substr(len-3,3)+result;
  len -=3;
 }
 result = tempValue.substr(0,len)+result;
 return result+devValue;
 }
 
 /*
 * Automaticly converts the value in the textbox to upper
 * and it also converts the Turkish characters to the closest letter in the alphabet
 *
 * @param value : the input text
 * 
 */
 function allCharsToUpper(value)
 {
  var tempValue = "";
  var len = value.length;
  for(i=0; i<len; i++)
  {
   var chr = value.substr(i,1);
   chr = chr.toUpperCase();
   if( chr == 'İ') {chr = 'I'; }
   else if( chr == 'Ğ') {chr = 'G';}
   else if( chr == 'Ö') {chr = 'O';}
   else if( chr == 'Ü') {chr = 'U';}
   else if( chr == 'Ş') {chr = 'S';}
   else if( chr == 'Ç') {chr = 'C';}
     
   tempValue = tempValue + chr;
  }
  return tempValue;
 }

Usage of this funcitons:

 <TABLE border="1">
   <tr>    
    <td width="150px">1. Only Number</td>
    <td>
   <input type="text" name="xxxx" maxlength="20" size="40" onkeypress= 'javascript:if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;'/>
    </td>
  </tr>
  
  <tr>    
    <td width="150px">2. Curreny</td>
    <td>
   <input type="text" name="xxxx" maxlength="20" size="40" onkeyup= 'this.value = ThausandSeperator(this.value,2);' />
    </td>
  </tr>
  
  <tr>    
    <td width="150px">3. To Upper</td>
    <td>
   <input type="text" name="xxxx" maxlength="20" size="40" onkeyup= 'this.value = allCharsToUpper(this.value);'/>
    </td>
  </tr>
 </TABLE>

Code Listing:

http://ozayakdora.googlepages.com/util.js

Advertisement