入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。

実装

<!-- 入力フォーム -->
<input id="input1074" type="text" />

<script type="text/javascript">
function format( comma, period) {
    comma = comma || ',';
    period = period || '.';
    var split = this.toString().split('.');
    var numeric = split[0];
    var decimal = split.length > 1 ? period + split[1] : '';
    var reg = /(\d+)(\d{3})/;
    while ( reg.test(numeric)) {
        numeric = numeric.replace( reg, '$1' + comma + '$2');
    }
    return numeric + decimal;
}

var oldval;
$(document).ready(function(){
    $('#input1074').on( 'keyup', function(){
        var newval = format.call( $(this).val().split(',').join(''), ',', '.');
        if (newval != oldval) {
            $(this).val(newval);
            oldval = newval;
        }
    });
});
</script>

デモ

ただ、国によっては区切りに使用する記号が違ったりします。スウェーデンなんかはカンマではなく、スペースだったり。理解はしてくれるとは思いますが。
でも、これさえあればプリン大量発注みたいなことも少なくなると思います。

課題

送信データには付与してほしくない。カスタマイズしてみよう。

: レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

: テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点チェックまで限定してくれます。ダウンロードスクリプト

: カルーセルプラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

: グラフ作成プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

: レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。ダウンロードスクリプト実装 $(document).ready

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を