Numeric mask not working as expected

[solstice]

Howdy folks,

When using a TextItem whose type is 'float' and a numeric mask is specified, the data entry is not behaving as would normally be expected.

 { name: 'pAmount', type: 'float', title:'Amount', useMask:true,
 mask:'000,000.00', visible:false, required:false, textAlign: 'right'}

The code above renders a field with the following mask: ___,___.00
When the control receives focus, the cursor is all the way to the left, and entering numbers results in the values being entered from left to right. This requires a user to manually move the cursor to the desired starting digit in order to enter the value. Further, they must manually enter the commas.

Expected behavior: When the field acquires focus, the cursor should be on the right. Data entry should populate the field from the right, such that the field's display value is as follows when entering in the numbers 1,2,3,4 and 5.

___,__1.00
___,_12.00
___,123.00
__1,234.00
_12,345.00

Some systems also only insert digits to the left of the decimal, and then only put digits to the right if the decimal character is typed. So, 1,2,3, ., 4, 5 would result in:

___,__1.00
___,_12.00
___,123.00
___,123.00
___,123.40
___,123.45



A workaround that might be suggested here would be to only accept numeric input, then formatting the value on the blur event. The problem with this approach is that it only supports whole numbers, not numbers with decimal values. The mask types for numerics only allow digits, "plus" and "minus". The decimal point is not supported. Putting a literal decimal point in the mask requires that the use navigate the cursor past the point mask character.

Before I head down the route of having to write my own mask type, is there something that I am overlooking?

Searching through the forums, I see that this is something that has caused other people difficulties, especially when it comes to currency masks. Some helpful guidance would be appreciated.

Thanks in advance,

Sol

[solstice]

I've worked around this issue by capturing the blur event and formatting the float using a custom formatter.

That's probably not an ideal approach for other people, tho.

[davidj6]

The text mask does not support variable-width numeric entry as described presently.

[solstice]

Thanks, Davidj6. In lieu of the proper approach, I was at least hoping for confirmation that this was, in fact, an issue. Manual, it is.

If anyone is interested in how to get a properly behaving currency field, here is my code. Hopefully it'll be useful to someone.

First, the input field:

{ 
   name: 'pAmount', 
   type: 'float', 
   title:'Amount', 
   useMask:true, 
   visible:false, 
   required:false, 
   textAlign: 'right',
   blur: function() {		
      this.setValue(formatCurrency(this.getValue(), ',') ); 	
	}
}

Then, the actual formatting code:

/** The delimiter parameter is the thousands separator.  **/
function formatCurrency(amt, delim) {
   
   // cast amt to string if numeric
   if(typeof amt == 'number')   amt = new String(amt);
   
   var a, s, c;
   amt = amt.replace(/([^.0-9_]*|\s*)(\d*)/g, "$2");
   if(!/\.{1}/.test(amt)) { amt = amt + "."; }
   a = new Array().concat(amt.split("."));
   s = "";
   for(var i = a[0].length - 1; i >= 0; i--) {   s += a[0].charAt(i); }
   s = s.replace(/(\d{3})/g, "$1,");
   a[0] = "";
   for(var i = s.length - 1; i >= 0; i--) { a[0] += s.charAt(i); }
   while(a[1].length < 2) { a[1] += "0"; }
   if(delim) {
      return a[0].replace(/^\,(.*)/, "$1") + "." + a[1].slice(0, 2);
   }
   else {
      return a[0].replace(/([^.0-9_]*|\s*)(\d*)/g, "$2") + "." + a[1].slice(0, 2);
   }
}