# 数値フィールドに値を入力時に、カンマがリアルタイムで自動表示される

**URL:** <https://community.cybozu.dev/t/topic/3077>\
**Category:** kintone 開発相談\
**Created:** [2018 年 5 月 25 日午前 8:57 UTC](https://community.cybozu.dev/t/topic/3077 "2018-05-25T08:57:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account728](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Legacy\_Account728](https://community.cybozu.dev/u/Legacy_Account728)\
**Post date:** [2018 年 5 月 25 日午前 8:57 UTC](https://community.cybozu.dev/t/topic/3077/1 "2018-05-25T08:57:05Z")

</div>

いつもお世話になっております。  
数値フィールドに値を入力する際に、カンマがリアルタイムで自動表示される方法を探しております。  
（例 1234と入力 → 4が入力された時に表示が1,234になる）

現状は以下のコードで実装しているのですが、  
kintoneで使われているクラスやidを指定する以外の方法はありますでしょうか？  
(アップデートでクラス名やidが予告なく変更される可能性があり、以下も本来は非推奨なコーディング(？)であると思われるため。)

また以下のコードでは、画面を読み込んで１回目にフォーカスを当てた時には動作せず、フォーカスを外して再度入力すると動作する  
という挙動になっておりますので、こちらのコードの修正箇所も教えていただきたいです。  
（フィールドの指定方法が悪いのか、こちらのコード以外でも２回目フォーカス時に処理が走ることが多々あります）

よろしくお願いいたします。

&nbsp;

```
jQuery.noConflict();
(function($) {
"use strict";

// 入力された数値にカンマを入れる
function numFormat(field) {
if (!field.value) return;
field.value = field.value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 入力された数値のカンマを消す
function removeComma(field) {
if (field.value) {
field.value = field.value.replace( /,/g, '');
}
}

// 画面表示時にカンマをつける
kintone.events.on(['app.record.create.show',
'app.record.edit.show',
'app.record.index.edit.show',
],
function(event) {
var record = event.record;
numFormat(record['数値_1']);

return event;
});

// 数値入力時にカンマを自動表示
kintone.events.on(['app.record.create.change.数値_1',
'app.record.edit.change.数値_1',
'app.record.index.edit.change.数値_1',
],
function(event){
let isIME = false;
var record = event.record;
// IME入力中はイベントを発生させない
$('.value-1111111 input').on('keydown', function(e) {
isIME = true;
});

$('.value-1111111 input').on('keypress', function(e) {
isIME = false;
});

$('.value-1111111 input').on('keyup', function(e) {
if (isIME === false)
$(this).val(addFigure($(this).val()));
});

$('.value-1111111 input').on('blur', function() {
$(this).val(addFigure($(this).val()));
});

const addFigure = function (value) {
let originValue = value;
value = removeFigure(value);
value = parseInt(value, 10);
if (isNaN(value)) return originValue;
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,');
};

const removeFigure = function (value) {
if (value.length === 0) return '';
let num = Number(value.toString().replace(/,/g, ''));
if (isNaN(num)) return value;
return num;
};

// 空欄の場合は0を自動入力
if(record['数値_1'].value === undefined){
record['数値_1'].value = 0;
}

return event;
});

// 保存時に文字列から数値に変換
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit',
],
function(event) {
var record = event.record;
removeComma(record['数値_1']);
return event;
});

})(jQuery);

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 5 月 30 日午前 10:48 UTC](https://community.cybozu.dev/t/topic/3077/2 "2018-05-30T10:48:46Z")

</div>

矢形 亮様

お世話になっております。 cstapの江田と申します。

kintone.event.onのコールバック関数内で、引数に指定したeventオブジェクトの値を変更してreturnすると書き換えられます。 [https://developer.cybozu.io/hc/ja/articles/201941984#step4](https://developer.cybozu.io/hc/ja/articles/201941984#step4)

```
(function(){'use strict';kintone.events.on(['app.record.edit.show','app.record.create.change.数値\_1','app.record.edit.change.数値\_1'],function(event){event.record.数値\_1.value=Number(event.record.数値\_1.value.replace(/,/g,'')).toLocaleString();returnevent;});kintone.events.on(['app.record.create.submit','app.record.edit.submit'],function(event){event.record.数値\_1.value=event.record.数値\_1.value.replace(/,/g,'');returnevent;});})();

```

※一覧画面のインライン編集ではレコード追加や編集画面と比較して、数値フィールドのinput要素のtype属性がnumberに指定されているなど、数字以外を入力しにくいようになっています。 一覧画面のインライン編集については、DOM操作なしに対応することは困難かと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account728](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Legacy\_Account728](https://community.cybozu.dev/u/Legacy_Account728)\
**Post date:** [2018 年 5 月 31 日午前 12:25 UTC](https://community.cybozu.dev/t/topic/3077/3 "2018-05-31T00:25:06Z")

</div>

江田様

ご回答ありがとうございます。  
大変参考になりました。

インライン編集につきましては仕様も含めて検討しようと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2196](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@Legacy\_Account2196](https://community.cybozu.dev/u/Legacy_Account2196)\
**Post date:** [2021 年 10 月 25 日午前 9:29 UTC](https://community.cybozu.dev/t/topic/3077/4 "2021-10-25T09:29:33Z")

</div>

お世話になります。

江田様のご回答いただいているコードですが、サブテーブル時にも同じ動作可能でしょうか。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 10 月 26 日午前 2:30 UTC](https://community.cybozu.dev/t/topic/3077/5 "2021-10-26T02:30:27Z")

</div>

初心者さん

お世話になっております。

サブテーブルの場合は記述が変わります。  
サブテーブルの操作方法については、下記がわかりやすいかと思います。  
[https://developer.cybozu.io/hc/ja/articles/360027244231](https://developer.cybozu.io/hc/ja/articles/360027244231)