月別アーカイブ: 2012年8月

3桁区切り(カンマ)で下2桁や下1桁は切り捨て入力の場合のJavaScript(自分メモ)


3桁区切り(カンマ)で下2桁や下1桁は切り捨て入力させたいとき、
正規表現だけだと難しそうだったのでsplitで切り分けてみた。

デモ画面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptで3桁区切りの応用</title>
<style type="text/css">
body{
font-size:80%;
}
input{
margin-right:4px;
text-align:right;
}
span{
color:#f00;
}
</style>

</head>
<body>

<input type="text" value="123456789" id="num">円

<p><span id="num1"></span>円(通常の3桁区切り)</p>
<p><span id="num2"></span>0円(10の位から3桁区切り)</p>
<p><span id="num3"></span>00円(100の位から3桁区切り)</p>

<script type="text/javascript">

var num = document.getElementById('num');

// イベントリスナ
var addEvent = document.addEventListener ?
function(node,type,listener){node.addEventListener(type,listener,false);}:
function(node,type,listener){node.attachEvent('on'+type, listener);}


var comma = function(e){
if(num.value.match(/^[0-9]+$/)){

// 通常の3桁区切り
var num1 = document.getElementById('num1');
var val = num.value.replace(/^[0]+/,'');
num1.innerHTML = val.replace(/(d)(?=(ddd)+$)/g, "$1,");

// 10の位から3桁区切り
var num2 = document.getElementById('num2');
if(num.value.match(/^[0-9]{3,}$/)){
var nums = [];
nums = num.value.replace(/^(d+)(d{2})$/g, "$1,$2").split(",");
nums[0] = nums[0].replace(/^[0]+/,'');
num2.innerHTML = nums[0].replace(/(d)(?=(ddd)+$)/g, "$1,") + ',' + nums[1];
}else{
num2.innerHTML = num.value;
}

// 100の位から3桁区切り
var num3 = document.getElementById('num3');
if(num.value.match(/^[0-9]{2,}$/)){
var nums = [];
nums = num.value.replace(/^(d+)(d{1})$/g, "$1,$2").split(",");
nums[0] = nums[0].replace(/^[0]+/,'');
num3.innerHTML = nums[0].replace(/(d)(?=(ddd)+$)/g, "$1,") + ',' + nums[1];
}else{
num3.innerHTML = num.value;
}

}

}

addEvent(num, 'keyup', comma);
addEvent(num, 'blur', comma);

window.onload = comma;

</script>

</body>
</html>