いつもお世話になっております。
数値フィールドに値を入力する際に、カンマがリアルタイムで自動表示される方法を探しております。
（例 1234と入力 → 4が入力された時に表示が1,234になる）
現状は以下のコードで実装しているのですが、
kintoneで使われているクラスやidを指定する以外の方法はありますでしょうか？
(アップデートでクラス名やidが予告なく変更される可能性があり、以下も本来は非推奨なコーディング(？)であると思われるため。)
また以下のコードでは、画面を読み込んで１回目にフォーカスを当てた時には動作せず、フォーカスを外して再度入力すると動作する
という挙動になっておりますので、こちらのコードの修正箇所も教えていただきたいです。
（フィールドの指定方法が悪いのか、こちらのコード以外でも２回目フォーカス時に処理が走ることが多々あります）
よろしくお願いいたします。
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);