Webアプリ開発で、数値を３桁のカンマ区切りで入力させる input タグへの対処として、jQuery を使った方法を
よく見かけます。
皆、良くできていているのですが、受信するサーバ側でカンマ区切り文字を取り除いて解釈しなければならず、
ちょっと惜しい感がありました。
入力表示は３桁カンマ区切りでも、送信データでは整数値のカンマ無しの形式で送るようにすべきと思い、
FORM送信でも、AJAX送信でも、どちらも対応できるような jQueryを書いてみました。
仕様は、input タグ、type="text" だけに適用させるものとして、
jQuery セレクタで対象を指定し、任意のフィルタ＝特定のinputタグだけ、つまり同じ数値入力をする inputタグを配置させる可能性あるので、
任意に指定できるフィルタで、３桁カンマ区切りを除去させます。
以下、ThreeDigits.js というJavaScriptソースを作成します。
/**
* ThreeDigits.js
*
* 「設定関数」
* ThreeDigits.configure( selector [, filter] );
* selector = ３桁区切り対象の input を取得する為の jQueryセレクタ
* filter（省略可能） = filter関数の結果が true になる input要素を、桁区切りカンマを取り除いて
* form送信するようにする。
*
* 「データ取得関数」
* ThreeDigits.getInputData( [filter] );
* input の name属性をキーにした input の value値のハッシュ配列を取得する。
* filter関数 を指定した場合、（省略可能）
* filter関数の結果が true になる input要素を、桁区切りカンマを取り除いて
* input の value値のハッシュ配列を返す。
* filter関数が常に false を返すのであれば、省略した場合と同じ結果になる。
*/
ThreeDigits = {
configure : function(selector, filter){
$(selector).focusout(function(){
var str = $(this).val();
str = str.replace(/[０-９]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
str = str.replace(/,/g, '');
if (str.match(/^(|-)[0-9]+$/)){
str = str.replace(/^[0]+([0-9]+)/g, '$1');
str = str.replace(/([0-9]｛1,3｝)(?=(?:[0-9]｛3｝)+$)/g, '$1,');
}
$(this).val(str);
}).focusin(function(){
var str = $(this).val();
str = str.replace(/,/g, '');
$(this).val(str);
});
if (typeof(filter) != "undefined"){
$('form').submit(function(){
$(':input[type=text]').each(function(ix, element){
if (filter(element)){
var v = $(element).val().replace(/,/g, '');
$(element).val(v);
}
});
});
}
}
,
getInputData : function(filter){
var data = {};
if (typeof(filter)==="undefined"){
$(':input[type=text]').each(function(ix, element){
data[$(element).attr('name')] = $(element).val();
});
}else{
$(':input[type=text]').each(function(ix, element){
if (filter(element)){
data[$(element).attr('name')] = $(element).val().replace(/,/g, '');
}else{
data[$(element).attr('name')] = $(element).val();
}
});
}
return data;
}
};
----------------------------------------
３桁カンマ区切りにする input の class属性として、"threeDigits" というの定義した例で
form送信／AJAX送信、それぞれの適用スクリプトは以下のようになる。
form送信で実行する場合、
<script type="text/javascript">
$(function(){
ThreeDigits.configure(':input[class=threeDigits]', function(element){
return $(element).attr('class')==="threeDigits";
});
});
</script>
これだけです。既に form要素の submitイベントに対する割り込みを
ThreeDigits.configure の中で設定しまうからです。
AJAX送信で実行する場合、ThreeDigits.getInputData で取得したデータを AJAXの送信データとして実行するようにします。
<script type="text/javascript">
$(function(){
ThreeDigits.configure(':input[class=threeDigits]');
$('#ajaxsend').click(function(){
var vdata = ThreeDigits.getInputData(function(element){
return $(element).attr('class')==="threeDigits";
});
$.ajax({
type: 'POST',
timeout: 30000,
url: 'http://xxxxx/xxxxx/xxxxx',
data: vdata,
dataType: 'html',
cache: false,
})
.done(function(data){
console.log('done data : ');
})
.fail(function(data){
console.log('fail data : ');
});
});
});
</script>
