☆☆ 新着記事 ☆☆

2018年6月21日木曜日

Javascript : フォームの桁カンマ



簡単バージョン(シングルフォーム：個別適用タイプ）



<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function thousands_separators(num) {
    var num_parts = num.toString().split(".");
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return num_parts.join(".");
  }
console.log(thousands_separators(1000));
console.log(thousands_separators(10000.23));
console.log(thousands_separators(100000));
</script>

 </head>
 <body>
 </body>
 </html>

適用してみるとこうなる。
<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <form name="F1">
 <li><input class="tb_fmt1" name="h_feet" type="text" />feet</li>
 <li><input class="tb_fmt1" name="h_inch" type="text" />inch </li>
 <li><input type="button" value="submit" onclick="calc()"></li>

 <li><input class="tb_fmt2" name="result" type="text" /> result </li>

 <script type="text/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();        //全選択
  }
}

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

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


 var a = parseFloat(document.F1.h_feet.value.replace(/,/g,'')); <- この段階でaは、小数点を含む
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　カンマなしの数字になる。

 var b = parseFloat(document.F1.h_inch.value.replace(/,/g,''));<- この段階でaは、小数点を含む
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　カンマなしの数字になる。
 var result = a + b;
 function thousands_separators(result) {
    var num_parts = result.toString().split(".");　　　　　　　　　　　　　　　　←小数点で分離
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");　←再度、カンマつきに
    return num_parts.join(".");　　　　　　　　　　　　　　　　　　　　　　　　　←小数点を結合
  }
 document.F1.result.value =thousands_separators(result);
}

 </script>
 </script>
</body>
</html>



簡単バージョン(複数フォーム　一括適用）


<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">



 </head>
 <body>
 <form name="F1">
 <li><input class="number" name="h_feet" type="text" />feet</li>
 <li><input class="number" name="h_inch" type="text" />inch </li>
 <li><input type="button" value="submit" onclick="calc()"></li>

 <li><input class="number" name="result" type="text" /> result </li>



 <script type="text/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();        //全選択
  }
}

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);}
 }
}
function calc(){

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


 var a = parseFloat(document.F1.h_feet.value.replace(/,/g,''));   <-- 計算時にカンマを取り除く
 var b = parseFloat(document.F1.h_inch.value.replace(/,/g,'')); <-- 計算時にカンマを取り除く
 var result = a + b;
 document.F1.result.value =result;
}

 </script>
 </script>
</body>
</html>


https://javascript.programmer-reference.com/js-textbox-format-comma/

============================================================
よいけど、複数の数値入力フォームがある時は？


<html>

<input id=numData type="text">

<Script>

/**
* 数値の3桁カンマ区切り
* 入力値をカンマ区切りにして返却
* [引数]   numVal: 入力数値
* [返却値] String(): カンマ区切りされた文字列
*/
 function addFigure(numVal) {
 // 空の場合そのまま返却
 if (numVal == ''){
  return '';
 }
 // 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
 numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
 // 数値でなければそのまま返却
 if ( !/^[+|-]?(\d*)(\.\d+)?$/.test(numVal) ){
  return numVal;
　 　}
 // 整数部分と小数部分に分割
 var numData = numVal.toString().split('.');
 // 整数部分を3桁カンマ区切りへ
 numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 // 小数部分と結合して返却
 return numData.join('.');
 }

/**
 * カンマ外し
 * 入力値のカンマを取り除いて返却
 * [引数]   strVal: 半角でカンマ区切りされた数値
 * [返却値] String(): カンマを削除した数値
 */
 function delFigure(strVal){
 return strVal.replace( /,/g , "" );
 }

/**
 * 全角から半角への変革関数
 * 入力値の英数記号を半角変換して返却
 * [引数]   strVal: 入力値
 * [返却値] String(): 半角変換された文字列
 */
 function toHalfWidth(strVal){
 // 半角変換
 var halfVal = strVal.replace(/[！-～]/g,
  function( tmpStr ) {
  // 文字コードをシフト
  return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
  }
 );
  return halfVal;
}

/**
 * 処理を適用するテキストボックスへのイベント設定
 * onBlur : カンマ区切り処理実施
 * onFocus : カンマ削除処理実施
 */
var elm = document.getElementById('numdata1','numdata2');
elm.addEventListener('blur', function(){ this.value = addFigure(this.value) }, false);
elm.addEventListener('focus', function(){ this.value = delFigure(this.value) }, false);

 }
時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)