入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、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>

デモ

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

課題

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

: Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。ダウンロード *黄色ボタン

: テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。ダウンロードデモ My Tit

: ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。サムネ

: タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。デフォルトでは、768