pete-otaqui/currency-input.html

## currency-input.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Currency Input</title>
    <style>
        body {
            font-family: OpenSans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 32px;
        }
        input[data-type="currency"] {
            font-size: 32px;
            font-family: "Andale Mono", "Courier New", Courier, monospace;
            text-align: right;
        }
    </style>
</head>
<body>
    <input data-type="currency" value="$1,234" />
    <script>

        var InputCurrency = {};
        InputCurrency.applyToInput = function(input) {
            if ( !input.getAttribute('data-separator') ) {
                input.setAttribute('data-separator', ',');
            }
            if ( !input.getAttribute('data-decimal') ) {
                input.setAttribute('data-decimal', '.');
            }
            input.setAttribute('data-previous', input.value);
            input.addEventListener('keyup', InputCurrency.onChange);
        };
        InputCurrency.getSettings = function(input) {
            return {
                separator: ',',
                symbol: '$'
            };
        }
        InputCurrency.onChange = function(e) {
            var input = e.target;
            var settings = InputCurrency.getSettings(input);
            var previous_val = input.getAttribute('data-previous');
            var original_pos = input.selectionStart;
            var original_val = input.value;
            var number_string = InputCurrency.parseNumberString(original_val, settings);
            var formatted_num = InputCurrency.formatNumber(number_string, settings);
            var prev_pos = input.selectionStart;
            input.value = formatted_num;
            input.setAttribute('data-previous', formatted_num);
            var pos = InputCurrency.calculateCursorPosition(prev_pos, previous_val, formatted_num);
            input.setSelectionRange(pos, pos);
        };
        InputCurrency.calculateCursorPosition = function(pos, prev_val, curr_val) {
            if ( prev_val.length + 2 === curr_val.length ) {
                pos += 1;
            }
            if ( curr_val[pos-1] === ',' ) {
                console.log('next to comma');
            }
            return pos;
        };
        InputCurrency.parseNumberString = function(val, settings) {
            var str = val
                .replace(InputCurrency.getRegExp(settings.symbol), '')
                .replace(InputCurrency.getRegExp('[^0-9,]+'), '')
                .trim()
                .split(settings.separator)
                .join('');
            var num = parseInt(str, 10);
            return '' + num;
        }
        InputCurrency.formatNumber = function(number, settings) {
            var separated = InputCurrency.addSeparators(number, settings);
            var symboled = InputCurrency.addSymbol(separated);
            return symboled;
        }
        InputCurrency.addSymbol = function(number, sym, pos) {
            sym = sym || '$';
            pos = pos || -1;
            return ( pos === -1 ) ? sym + number : number + ' ' + sym;
        }
        InputCurrency.addSeparators = function(number, settings) {
            var number_string = '' + number;
            var numbers_list = number_string.split('');
            var formatted_num = '';
            var cur = numbers_list.length, inv;
            var chr;
            sep = settings.separator;
            while (cur--) {
                inv = numbers_list.length - cur;
                chr = numbers_list[cur];
                formatted_num = chr + formatted_num;
                if ( cur && inv % 3 === 0 ) {
                    formatted_num = sep + formatted_num;
                }
            }
            return formatted_num;
        }
        InputCurrency.getRegExp = function(str) {
            if ( str === '$' ) {
                str = '\\' + str;
            }
            return new RegExp(str, 'g');
        }
        InputCurrency.applyToInputs = function() {
            var inputs = document.querySelectorAll('input[data-type="currency"]');
            [].slice.call(inputs).forEach(function(input) {
                var ic = InputCurrency.applyToInput(input);
            });
        };

    </script>

    <script>
    InputCurrency.applyToInputs();
    </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Currency Input</title>
	<style>
	body {
	font-family: OpenSans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 32px;
	}
	input[data-type="currency"] {
	font-size: 32px;
	font-family: "Andale Mono", "Courier New", Courier, monospace;
	text-align: right;
	}
	</style>
	</head>
	<body>
	<input data-type="currency" value="$1,234" />
	<script>

	var InputCurrency = {};
	InputCurrency.applyToInput = function(input) {
	if ( !input.getAttribute('data-separator') ) {
	input.setAttribute('data-separator', ',');
	}
	if ( !input.getAttribute('data-decimal') ) {
	input.setAttribute('data-decimal', '.');
	}
	input.setAttribute('data-previous', input.value);
	input.addEventListener('keyup', InputCurrency.onChange);
	};
	InputCurrency.getSettings = function(input) {
	return {
	separator: ',',
	symbol: '$'
	};
	}
	InputCurrency.onChange = function(e) {
	var input = e.target;
	var settings = InputCurrency.getSettings(input);
	var previous_val = input.getAttribute('data-previous');
	var original_pos = input.selectionStart;
	var original_val = input.value;
	var number_string = InputCurrency.parseNumberString(original_val, settings);
	var formatted_num = InputCurrency.formatNumber(number_string, settings);
	var prev_pos = input.selectionStart;
	input.value = formatted_num;
	input.setAttribute('data-previous', formatted_num);
	var pos = InputCurrency.calculateCursorPosition(prev_pos, previous_val, formatted_num);
	input.setSelectionRange(pos, pos);
	};
	InputCurrency.calculateCursorPosition = function(pos, prev_val, curr_val) {
	if ( prev_val.length + 2 === curr_val.length ) {
	pos += 1;
	}
	if ( curr_val[pos-1] === ',' ) {
	console.log('next to comma');
	}
	return pos;
	};
	InputCurrency.parseNumberString = function(val, settings) {
	var str = val
	.replace(InputCurrency.getRegExp(settings.symbol), '')
	.replace(InputCurrency.getRegExp('[^0-9,]+'), '')
	.trim()
	.split(settings.separator)
	.join('');
	var num = parseInt(str, 10);
	return '' + num;
	}
	InputCurrency.formatNumber = function(number, settings) {
	var separated = InputCurrency.addSeparators(number, settings);
	var symboled = InputCurrency.addSymbol(separated);
	return symboled;
	}
	InputCurrency.addSymbol = function(number, sym, pos) {
	sym = sym \|\| '$';
	pos = pos \|\| -1;
	return ( pos === -1 ) ? sym + number : number + ' ' + sym;
	}
	InputCurrency.addSeparators = function(number, settings) {
	var number_string = '' + number;
	var numbers_list = number_string.split('');
	var formatted_num = '';
	var cur = numbers_list.length, inv;
	var chr;
	sep = settings.separator;
	while (cur--) {
	inv = numbers_list.length - cur;
	chr = numbers_list[cur];
	formatted_num = chr + formatted_num;
	if ( cur && inv % 3 === 0 ) {
	formatted_num = sep + formatted_num;
	}
	}
	return formatted_num;
	}
	InputCurrency.getRegExp = function(str) {
	if ( str === '$' ) {
	str = '\\' + str;
	}
	return new RegExp(str, 'g');
	}
	InputCurrency.applyToInputs = function() {
	var inputs = document.querySelectorAll('input[data-type="currency"]');
	[].slice.call(inputs).forEach(function(input) {
	var ic = InputCurrency.applyToInput(input);
	});
	};

	</script>

	<script>
	InputCurrency.applyToInputs();
	</script>
	</body>
	</html>