jQueryでinputフォーム入力中に3桁ごとのカンマをつける


今回は全角入力時の問題は無視しています。

keyupイベント時にハンマーカンマーをつけるときに、IME入力でキーボードのテンキーを使用している際keyupイベントで強制的にカンマをつけるようにすると、現在の入力内容とIME入力の確定が2重で動いて数字がえらいこっちゃになるのでその部分の対策として、IME入力中はkeypressイベントが発動しないというのを利用して対策してみる

html

<input id="input-price" type="text" />

javascript

$(function() {
	let isIME = false;
  
  $('#input-price').on('keydown', function(e) {
  	isIME = true;
  });
  
  $('#input-price').on('keypress', function(e) {
  	isIME = false;
  });
  
  $('#input-price').on('keyup', function(e) {
  	if (isIME === false)
    	$(this).val(addFigure($(this).val()));
  });
  
  $('#input-price').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;
};

isIMEがkeypressを通ってfalseになっている場合のみカンマをkeyupイベント時につけるようにしています。

それ以外は一般的なカンマ付与と同じような感じです。

(正直blurしたときにカンマつけるだけでいいと個人的におもってる・・・(´・ω・`)

jsFiddleにサンプル置いてます

https://jsfiddle.net/okus524k/


この投稿へのコメント

コメントはありません。

コメントを残す

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL