[JavaScript] 数値カンマ編集を行うテキストボックス – コピペで使える JavaScript逆引きリファレンス

フォーカスが当たるとカンマ編集を解除し、フォーカスが外れるとカンマ編集を行うテキストボックスのサンプルです。

数値カンマ編集を行うテキストボックス

例）フォーカスインでカンマ編集を解除、フォーカスアウトでカンマ編集を行う

※数値でない場合は編集を行いません。

/**************************
 * カンマ編集を行うFunction
 **************************/
function toComma(obj){
  if((obj.value).trim().length != 0 && !isNaN(obj.value)){
    obj.value = Number(obj.value).toLocaleString();
  }
}

/**************************
 * カンマ編集を解除するFunction
 **************************/
function offComma(obj){
  var reg = new RegExp(",", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

/**************************

* カンマ編集を行うFunction

**************************/

function toComma(obj){

if((obj.value).trim().length != 0 && !isNaN(obj.value)){

obj.value = Number(obj.value).toLocaleString();

}

/**************************

* カンマ編集を解除するFunction

**************************/

function offComma(obj){

var reg = new RegExp(",", "g");

var chgVal = obj.value.replace(reg, "");

if(!isNaN(chgVal)){

obj.value = chgVal; //値セット

obj.select(); //全選択

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" onfocus="offComma(this);" onblur="toComma(this); >
</body>
</html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

実行サンプル

フォーカスインでカンマ編集解除、フォーカスアウトでカンマ編集を行います。

解説

onFocus/onBlueイベントハンドラを使用してカンマ編集/解除を行っています。
数値でない場合はカンマ編集を行いません。
スペースのみの場合もカンマ編集を行いません。
初期表示時は、カンマ編集をした数値をセットしておく必要があります。

テキストボックスにonfocus/onblurを指定しないパターン

　カンマ編集を行うテキストボックスが１つであればタグにonfocus/onblurを書いても問題ないですが、複数ある場合だと全てのテキストボックスにonfocus/onblurを書かなければならず、見た目やメンテナンス性が悪くなってしまいます。

　そこで以下のように記述すれば、class="number"と指定された全てのテキストボックスがカンマ編集されるようになります。

window.onload = function(){
 var elements = document.getElementsByClassName("number");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offComma(this);}
    elements[i].onblur = function(){toComma(this);}
 }
}

window.onload = function(){

var elements = document.getElementsByClassName("number");

for(var i=0;i<elements.length;i++){

elements[i].onfocus = function(){offComma(this);}

elements[i].onblur = function(){toComma(this);}

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" class="number" >
</body>
</html>