金額入力スクリプト

JavaScript

入力時にカンマ表示されるのが特徴のスクリプトを作成。CurrencyFlagなんて使ってるのがイケてないけど。

// need prototype.js ver1.6 and more.

// subscription
function bindByClassName(a,b,c)
{
	var elements = document.getElementsByClassName(a);
	for (var i=0; i<elements.length; i++)
	{
		Event.observe(elements[i], b, c);
	}
}
//

// utilities
var Currency =
{
	onFlag : function()
	{
		CurrencyFlag = true;
	},
	offFlag : function()
	{
		CurrencyFlag = false;
	},
	setComma : function(num)
	{
		var value = new String(num).replace(/,/g, '');
		while (value != (value = value.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
		return value;
	},
	trimExceptNumeric : function(num)
	{
		var nocomma = num.replace(/[^0-9]/g,'');
		(nocomma.length == 0) ? nocomma = '0' : nocomma;
		return nocomma;
	},
	setCurrencyStyleByClassName : function(className)
	{
		var elements = document.getElementsByClassName(className);
		for (var i=0; i<elements.length; i++)
		{
			elements[i].style.textAlign = 'right';
		}
	}
};
function checkIsZenkaku(e)
{
	var f;
	if (e.length == 0)
	{
		e = 0;
		return false;
	}
	for (var i = 0; i < e.length; ++i)
	{
		var c = e.charCodeAt(i);
		if (!f && (c < 256 || (c >= 0xff61 && c <= 0xff9f)))
		{
			f = false;
		}
		else
		{
			f = true;
			break;
		}
	}
	if (f)
		return true;
	else
		return false;
}
//


var CurrencyFlag = false;
function handleNumericAndCommaKey(evt)
{
	var e = evt ? evt : event;
	var value = e.target.value;
	if (value == '')
	{
		e.target.value = '0';
		return false;
	}
	if (checkIsZenkaku(value))
	{
		window.alert('全角文字が入力されています。半角文字入力で金額を入れてください。');
	}
	value = Currency.trimExceptNumeric(e.target.value);
	if (value.length > 1) {
		if (CurrencyFlag)
		{
			value = value.replace(/^0*/, '');
		}
		if (value.length == 0)
		{
			value = '0';
		}
		e.target.value = value;
	}
	value = Currency.setComma(value);
	if (CurrencyFlag)
	{
		e.target.value = value;
	}
}
function initInputCurrency()
{
	Currency.setCurrencyStyleByClassName('input_currency');
	bindByClassName('input_currency', 'focus', Currency.offFlag);
	bindByClassName('input_currency', 'keydown', Currency.onFlag);
	bindByClassName('input_currency', 'keyup', handleNumericAndCommaKey);
}

Event.observe(window, 'load', initInputCurrency);

これをinputcurrency.jsに保存し、先の Tab with Enter Key と組み合わせてみたサンプル。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>金額入力スクリプト</title>

<style type="text/css">
#form input.input_currency {
	width:20em;
}
</style>

<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="inputcurrency.js" charset="UTF-8"></script>
<script type="text/javascript" src="tabindexwithenter.js"></script>

<script type="text/javascript">
<!--
//<![CDATA[
function init()
{
	document.forms[0].elements[0].select();
}
window.onload=init;
//]]>
//-->
</script>

</head>

<body>

<form id="form" autocomplete="off">
<input type="text" value="0" class="input_currency" tabindex="1"/>
<input type="text" value="0" class="input_currency" tabindex="2"/>
<br/>
<input type="text" value="0" class="input_currency" tabindex="3"/>
<input type="text" value="0" class="input_currency" tabindex="4"/>
<br/>
<input type="text" value="0" class="input_currency" tabindex="5"/>
<input type="text" value="0" class="input_currency" tabindex="6"/>
</form>

</body>

</html>