【jQuery】時間入力フィールドでコロン（:）を自動挿入する方法

時間や時刻を入力する際に、入力フィールドにコロン（:）を自動的に挿入して便利に使える方法を紹介します。この方法を実装するためには、jQueryを使ってJavaScriptで簡単に実現できます。

jQuery

jQueryを使ってHTMLの入力フィールドに対して動的な挿入を行います。以下のコードは、そのための基本的なスクリプトです。

$(document).ready(function() {
    $('#timeInput').on('input', function() {
        var val = this.value.replace(/[^0-9]/g, ''); // 数字以外の文字を削除
        if (val.length > 4) {
            val = val.slice(0, 4); // 4桁を超えた場合、入力値を4桁までに制限する
        }
        if (val.length > 2) {
            val = val.slice(0, 2) + ':' + val.slice(2); // コロンを挿入
        }
        this.value = val;
    });
});

• $(document).ready(function() { … });: ページが読み込まれた時に処理を開始するjQueryの基本的な記述です。
• $(‘#timeInput’).on(‘input’, function() { … });: IDがtimeInputである入力フィールドに対して、入力（input）があった際にイベントが発火します。
• var val = this.value.replace(/[^0-9]/g, ”);: 入力された値から数字以外の文字を正規表現で削除します。
• if (val.length > 2) { val = val.slice(0, 2) + ‘:’ + val.slice(2); }: 入力が2文字以上になったら、2文字目の後ろにコロンを挿入します。
• if (val.length > 4) { val = val.slice(0, 4); }: 入力された値が4桁を超えた場合、入力値を4桁までに制限しています。これにより、5桁目以降の文字は無視され、入力フィールドに表示されません。

サンプル