moneymask

Yii Framework Extensions

Createnew extension

Popular Tags

moneymask Just another money mask for your money-related fields

Requirements
Usage
Resources

This is wrapper for jQuery plugin jquery-maskmoney.

Requirements ¶

Tested very quickly on Firefox 4 and Google Chrome on Windows 7

Usage ¶

Extract the zip file to your extensions folder.

These are the variables you can change:

element: (required) the input field to be moneymasked (uses jQuery selector)

currency: (optional) used to set the symbol if config['symbol'] is not given

config: (optional) options for this extension.

The options that you can set are

symbol the symbol to be used before of the user values. default: 'US$'

showSymbol - set if the symbol must be displayed or not. default: false

symbolStay - set if the symbol will stay in the field after the user exists the field. default: false

thousands - the thousands separator. default: ','

decimal - the decimal separator. default: '.'

precision - how many decimal places are allowed. default: 2

defaultZero - when the user enters the field, it sets a default mask using zero. default: true

allowZero - use this setting to prevent users from inputing zero. default: false

allowNegative - use this setting to prevent users from inputing negative values. default: false

Use it like this:

<?php
$this->widget('application.extensions.moneymask.MMask',array(
    'element'=>'#testing',
    'currency'=>'PHP',
    'config'=>array(
        'showSymbol'=>true,
        'symbolStay'=>true,
    )
));

echo CHtml::textField('testing', '', array('id'=>'testing'));
?>

Resources ¶

4 0

12 followers

1 297 downloads

Yii Version: 1.1

License: MIT

Category: User Interface

Tags: mask

Developed by: morcen

Created on: Jun 5, 2011

Last updated: 12 years ago

Downloads

moneymask.zip

show all

Related Extensions

User Contributed Notes 10

#4095

1 0

Bugs bugs bugs

I noticed just now that it is not masking the text field if it already has a value. There's still a need to type something for it be masked...

morcen at Jun 6, 2011, 2:15:57 AM

#5151

0 0

wonderful.. thx for a great extension

Thank you for this extension. I'm using this effectively...

may I ask you to make another handphone masking?.. like the script on this page

http://www.kodyaz.com/articles/javascript-phone-format-phone-number-format.aspx

i just dont know how to modify from your moneymask to handphonemask... thank you, once again..

Peter JK at Sep 19, 2011, 8:52:51 AM

#8091

0 0

More than one moneymask

When I use more than one moneymask in my view page, only one field works.
any solution?

banamlehsb at May 9, 2012, 3:34:58 PM

#8092

1 0

More than one...

@banamlehsb yeh I had the same problem until I did the following:

1) only include one widget
2) in the 'selector' option, specify both (or as many) text inputs as you like in the normal $ way. (e.g. '#input1, #input 2')

natb19 at May 9, 2012, 3:41:02 PM

#8093

0 0

More than one moneymask (solved)

@natb19: Thanks very much. I solved my problem. In 'element' option (not 'selector' option), I added selector jquery like you.

<?php
                $this->widget('application.extensions.moneymask.MMask',array(
                    'element'=>'#price,#total',
                    'currency'=>'PHP',
                    'config'=>array(
                        'symbolStay'=>true,
                        'thousands'=>'.',
                        'decimal'=>',',
                        'precision'=>0,
                    )
                ));

                echo CHtml::textField('price', '', array('id'=>'price'));
                ?>

Note: In other text field you should change id of textfield exactly.

banamlehsb at May 9, 2012, 4:09:00 PM

#8094

0 0

More than one...

Ahh, yes, element! show's how good my memory is! ;)

BTW, you don't have to use #id, your could use the same class name for all of the inputs you want to affect. That could make things easier when creating multiple forms... e.g.

class="dollars"
class="gbp"

and use different widget configs to affect them.

natb19 at May 9, 2012, 4:27:33 PM

#8098

0 0

MoneyMask isn't masking when it already has value

Like @macinville comment. MoneyMask isn't masking when the text field already has a value.
When that field validated failed, you must type something on that text field to mask again.
Any solution?

banamlehsb at May 10, 2012, 4:01:50 AM

#11123

0 0

CMaskedTextField

Why after using the moneymask, the core CMaskedTextField stops working on the same form?
Didn't find solution on the forums...

cruzeta51 at Dec 18, 2012, 9:52:36 PM

#15951

0 0

More options?

Is there an option to unmask?

bodyfarmer at Jan 3, 2014, 2:05:48 AM

#16457

0 0

Bug with CMaskedTextField

I solved this problem changing jquery.maskMoney.js in assets folder. Both (CMaskedTextField and mask money) declare a function with same name (mask), I changed this name in maskMoney (and where it's called ) to solve the problem.

(function($) {
	$.fn.maskMoney = function(settings) {
		settings = $.extend({
			symbol: 'US$',
			showSymbol: false,
			symbolStay: false,
			thousands: ',',
			decimal: '.',
			precision: 2,
			defaultZero: true,
			allowZero: false,
			allowNegative: false
		}, settings);

		return this.each(function() {
			var input = $(this);

			function keypressEvent(e) {
				e = e||window.event;
				var k = e.charCode||e.keyCode||e.which;
				if (k == undefined) return false; //needed to handle an IE "special" event
				if (input.attr('readonly') && (k!=13&&k!=9)) return false; // don't allow editing of readonly fields but allow tab/enter

				if (k<48||k>57) { // any key except the numbers 0-9
					if (k==45) { // -(minus) key
						input.val(changeSign(input));
						return false;
					}
					if (k==43) { // +(plus) key
						input.val(input.val().replace('-',''));
						return false;
					} else if (k==13||k==9) { // enter key or tab key
						return true;
					} else if (k==37||k==39) { // left arrow key or right arrow key
						return true;
					} else { // any other key with keycode less than 48 and greater than 57
						preventDefault(e);
						return true;
					}
				} else if (input.val().length==input.attr('maxlength')) {
					return false;
				} else {
					preventDefault(e);

					var key = String.fromCharCode(k);
					var x = input.get(0);
					var selection = input.getInputSelection(x);
					var startPos = selection.start;
					var endPos = selection.end;
					x.value = x.value.substring(0, startPos) + key + x.value.substring(endPos, x.value.length);
					maskAndPosition(x, startPos + 1);
					return false;
				}
			}

			function keydownEvent(e) {
				e = e||window.event;
				var k = e.charCode||e.keyCode||e.which;
				if (k == undefined) return false; //needed to handle an IE "special" event
				if (input.attr('readonly') && (k!=13&&k!=9)) return false; // don't allow editing of readonly fields but allow tab/enter

				var x = input.get(0);
				var selection = input.getInputSelection(x);
				var startPos = selection.start;
				var endPos = selection.end;

				if (k==8) { // backspace key
					preventDefault(e);

					if(startPos == endPos){
						// Remove single character
						x.value = x.value.substring(0, startPos - 1) + x.value.substring(endPos, x.value.length);
						startPos = startPos - 1;
					} else {
						// Remove multiple characters
						x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
					}
					maskAndPosition(x, startPos);
					return false;
				} else if (k==9) { // tab key
					return true;
				} else if (k==46||k==63272) { // delete key (with special case for safari)
					preventDefault(e);
					if(x.selectionStart == x.selectionEnd){
						// Remove single character
						x.value = x.value.substring(0, startPos) + x.value.substring(endPos + 1, x.value.length);
					} else {
						//Remove multiple characters
						x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
					}
					maskAndPosition(x, startPos);
					return false;
				} else { // any other key
					return true;
				}
			}

			function focusEvent(e) {
				var mask = getDefaultMask();
				if (input.val()==mask) {
					input.val('');
				} else if (input.val()==''&&settings.defaultZero) {
					input.val(setSymbol(mask));
				} else {
					input.val(setSymbol(input.val()));
				}
				if (this.createTextRange) {
					var textRange = this.createTextRange();
					textRange.collapse(false); // set the cursor at the end of the input
					textRange.select();
				}
			}

			function blurEvent(e) {
				if ($.browser.msie) {
					keypressEvent(e);
				}

				if (input.val()==''||input.val()==setSymbol(getDefaultMask())||input.val()==settings.symbol) {
					if(!settings.allowZero) input.val('');
					else if (!settings.symbolStay) input.val(getDefaultMask());
					else input.val(setSymbol(getDefaultMask()));
				} else {
					if (!settings.symbolStay) input.val(input.val().replace(settings.symbol,''));
					else if (settings.symbolStay&&input.val()==settings.symbol) input.val(setSymbol(getDefaultMask()));
				}
			}

			function preventDefault(e) {
				if (e.preventDefault) { //standard browsers
					e.preventDefault();
				} else { // internet explorer
					e.returnValue = false
				}
			}

			function maskAndPosition(x, startPos) {
				var originalLen = input.val().length;
				input.val(maskMoneyValue(x.value));
				var newLen = input.val().length;
				startPos = startPos - (originalLen - newLen);
				input.setCursorPosition(startPos);
			}

			function maskMoneyValue(v) {
				v = v.replace(settings.symbol,'');

				var strCheck = '0123456789';
				var len = v.length;
				var a = '', t = '', neg='';

				if(len!=0 && v.charAt(0)=='-'){
					v = v.replace('-','');
					if(settings.allowNegative){
						neg = '-';
					}
				}

				if (len==0) {
					if (!settings.defaultZero) return t;
					t = '0.00';
				}

				for (var i = 0; i<len; i++) {
					if ((v.charAt(i)!='0') && (v.charAt(i)!=settings.decimal)) break;
				}

				for (; i<len; i++) {
					if (strCheck.indexOf(v.charAt(i))!=-1) a+= v.charAt(i);
				}

				var n = parseFloat(a);
				n = isNaN(n) ? 0 : n/Math.pow(10,settings.precision);
				t = n.toFixed(settings.precision);

				i = settings.precision == 0 ? 0 : 1;
				var p, d = (t=t.split('.'))[i].substr(0,settings.precision);
				for (p = (t=t[0]).length; (p-=3)>=1;) {
					t = t.substr(0,p)+settings.thousands+t.substr(p);
				}

				return (settings.precision>0)
					? setSymbol(neg+t+settings.decimal+d+Array((settings.precision+1)-d.length).join(0))
					: setSymbol(neg+t);
			}

			function maskMoneyMask() {
                            
				var value = input.val();
				input.val(maskMoneyValue(value));
			}

			function getDefaultMask() {
				var n = parseFloat('0')/Math.pow(10,settings.precision);
				return (n.toFixed(settings.precision)).replace(new RegExp('\\.','g'),settings.decimal);
			}

			function setSymbol(v) {
				if (settings.showSymbol) {
					if (v.substr(0, settings.symbol.length) != settings.symbol) return settings.symbol+v;
				}
				return v;
			}

			function changeSign(i){
				if (settings.allowNegative) {
					var vic = i.val();
					if (i.val()!='' && i.val().charAt(0)=='-'){
						return i.val().replace('-','');
					} else{
						return '-'+i.val();
					}
				} else {
					return i.val();
				}
			}

			input.bind('keypress.maskMoney',keypressEvent);
			input.bind('keydown.maskMoney',keydownEvent);
			input.bind('blur.maskMoney',blurEvent);
			input.bind('focus.maskMoney',focusEvent);
			input.bind('mask', maskMoneyMask);

			input.one('unmaskMoney',function() {
				input.unbind('.maskMoney');

				if ($.browser.msie) {
					this.onpaste= null;
				} else if ($.browser.mozilla) {
					this.removeEventListener('input',blurEvent,false);
				}
			});
		});
	}

	$.fn.unmaskMoney=function() {
		return this.trigger('unmaskMoney');
	};

	$.fn.maskMoneyMask=function() {
		return this.trigger('maskMoneyMask');
	};

	$.fn.setCursorPosition = function(pos) {
		this.each(function(index, elem) {
			if (elem.setSelectionRange) {
				elem.focus();
				elem.setSelectionRange(pos, pos);
			} else if (elem.createTextRange) {
				var range = elem.createTextRange();
				range.collapse(true);
				range.moveEnd('character', pos);
				range.moveStart('character', pos);
				range.select();
			}
		});
		return this;
	};

	$.fn.getInputSelection = function(el) {
		var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;

		if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
			start = el.selectionStart;
			end = el.selectionEnd;
		} else {
			range = document.selection.createRange();

			if (range && range.parentElement() == el) {
				len = el.value.length;
				normalizedValue = el.value.replace(/\r\n/g, "\n");

				// Create a working TextRange that lives only in the input
				textInputRange = el.createTextRange();
				textInputRange.moveToBookmark(range.getBookmark());

				// Check if the start and end of the selection are at the very end
				// of the input, since moveStart/moveEnd doesn't return what we want
				// in those cases
				endRange = el.createTextRange();
				endRange.collapse(false);

				if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
					start = end = len;
				} else {
					start = -textInputRange.moveStart("character", -len);
					start += normalizedValue.slice(0, start).split("\n").length - 1;

					if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
						end = len;
					} else {
						end = -textInputRange.moveEnd("character", -len);
						end += normalizedValue.slice(0, end).split("\n").length - 1;
					}
				}
			}
		}

		return {
			start: start,
			end: end
		};
	}
})(jQuery);

Márcio Lordelo at Feb 25, 2014, 6:55:40 PM

Categories