Currency Format Input Box

To try this input box, copy paste the code below and save as test.html and then open it with a browser, or use the "Try Me" section on the right side bar of this blog.

<html>
<script type="text/javascript">  
 
function format(fieldName) {  
  decSeparator = '.';  
  thousandSeparator = ',';  
  field = document.getElementById(fieldName);  
  caret = getCaretPos(field);  
  newValue = '';  
  oldValue = '';  
  sign = '';  
  decimal = decSeparator + '00';  
  for (i = 0; i < field.value.length; i++) {  
     if (field.value.charAt(i) == '-') {  
        sign = '-';  
     } else if (field.value.charAt(i) == decSeparator) {  
        decimal = decSeparator;  
        for (j = i+1; j < i+3; j++) {  
           if (field.value.charAt(j).match('[0-9]') != null) {  
              decimal += field.value.substr(j, 1);  
           }  
        }  
        break;  
     } else if (field.value.charAt(i).match('[0-9]') != null) {  
        oldValue += field.value.charAt(i);  
     } else if (field.value.charAt(i) == thousandSeparator) {  
        caret--;  
     }  
  }  
    
  for (i = 0; i < oldValue.length; i++) {  
     newValue += oldValue.charAt(i);  
     if ((i != oldValue.length - 1) && ((oldValue.length - i) % 3 == 1)) {  
        newValue += thousandSeparator;  
        caret++;  
     }  
  }  
  if (newValue != '') {  
     field.value = sign + newValue + decimal;  
  }  
  setCaretPos(field, caret);  
}  
 
function insertAtCaret(obj, text) {  
  if(document.selection) {  
     obj.focus();  
     var orig = obj.value.replace(/\r\n/g, "\n");  
     var range = document.selection.createRange();  
 
     if(range.parentElement() != obj) {  
        return false;  
     }  
 
     range.text = text;  
       
     var actual = tmp = obj.value.replace(/\r\n/g, "\n");  
 
     for(var diff = 0; diff < orig.length; diff++) {  
        if(orig.charAt(diff) != actual.charAt(diff)) break;  
     }  
 
     for(var index = 0, start = 0;   
        tmp.match(text)   
           && (tmp = tmp.replace(text, ""))   
           && index <= diff;   
        index = start + text.length  
     ) {  
        start = actual.indexOf(text, index);  
     }  
  } else if(obj.selectionStart) {  
     var start = obj.selectionStart;  
     var end   = obj.selectionEnd;  
 
     obj.value = obj.value.substr(0, start)   
        + text   
        + obj.value.substr(end, obj.value.length);  
  }  
    
  if(start != null) {  
     setCaretTo(obj, start + text.length);  
  } else {  
     obj.value += text;  
  }  
}  
 
function setCaretPos (obj, pos)  
{  
 if (obj.selectionStart) {  
       obj.focus();   
       obj.setSelectionRange(pos, pos);   
  } else if (document.selection) {  
    var range = obj.createTextRange();   
       range.move("character", pos);   
       range.select();   
  }   
     
}  
 
function getCaretPos(obj) {  
  if (typeof obj.selectionStart != 'undefined')  
     return obj.selectionStart;  
  else if (document.selection)  
     return Math.abs(document.selection.createRange().moveStart('character', -1000000));  
}  
</script>

Try Me!!!!
<br/>
<input name="tryMe" id="tryMe" type="text" value="" onkeyup="format('tryMe');" onfocus="format('tryMe')" />
</html>

0 comments: (+add yours?)

Post a Comment

Subscribe to: Post Comments (Atom)