【jQuery】時間入力フィールドにコロンを自動挿入する完全ガイド｜HH:MM・24時間バリデーション・秒対応まで

時刻を入力するフォームで「10:30」のようにコロンを自動挿入すると、ユーザーが区切り文字を手動で入力する手間を省けます。この記事ではHH:MM形式のコロン自動挿入・24時間バリデーション・秒（SS）対応まで解説します。

input[type=time]との使い分け

ブラウザ標準の <input type="time"> はスマホでも時刻ピッカーUIが表示され、カスタム実装が不要です。デザイン上の制約がなければ標準UIの使用を推奨します。

HH:MM形式のコロン自動挿入

<input type="text" id="time-input" placeholder="例: 10:30"
       maxlength="5" inputmode="numeric">

$(function () {
  $('#time-input').on('input', function () {
    // 数字以外を除去し、最大4桁
    var digits    = $(this).val().replace(/[^0-9]/g, '').slice(0, 4);
    // 2桁後にコロンを挿入
    var formatted = digits.replace(/^(\d{2})(\d)/, '$1:$2');
    $(this).val(formatted);
  });
});

24時間バリデーション（00:00〜23:59）

function isValidTime(str) {
  if (!/^\d{2}:\d{2}$/.test(str)) return false;
  var parts = str.split(':');
  var h = parseInt(parts[0], 10);
  var m = parseInt(parts[1], 10);
  return h >= 0 && h <= 23 && m >= 0 && m <= 59;
}

$(function () {
  $('#time-input').on('input', function () {
    var val = $(this).val();
    if (val.length === 5) {
      var ok = isValidTime(val);
      $('#time-error').text(ok ? '' : '正しい時刻を入力してください（00:00〜23:59）');
    } else {
      $('#time-error').text('');
    }
  });
});

秒まで対応（HH:MM:SS）

<input type="text" id="time-ss" placeholder="例: 10:30:00"
       maxlength="8" inputmode="numeric">

$(function () {
  $('#time-ss').on('input', function () {
    var digits    = $(this).val().replace(/[^0-9]/g, '').slice(0, 6);
    var formatted = digits
      .replace(/^(\d{2})(\d)/, '$1:$2')                // HH: の後
      .replace(/^(\d{2}:\d{2})(\d)/, '$1:$2');        // MM: の後
    $(this).val(formatted);
  });
});

時刻の範囲バリデーション（営業時間チェック）

function timeToMinutes(str) {
  var parts = str.split(':');
  return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
}

$(function () {
  $('form').on('submit', function (e) {
    var val = $('#time-input').val();
    if (!isValidTime(val)) {
      e.preventDefault();
      $('#time-error').text('正しい時刻を入力してください');
      return;
    }

    // 営業時間 9:00〜18:00 のみ受付
    var minutes = timeToMinutes(val);
    if (minutes < timeToMinutes('09:00') || minutes > timeToMinutes('18:00')) {
      e.preventDefault();
      $('#time-error').text('受付時間は09:00〜18:00です');
    }
  });
});

まとめ

コロン自動挿入の実装ポイントをまとめます。

• HH:MM: 数字4桁を取得 → 2桁後にコロンを挿入
• バリデーション: h=0〜23, m=0〜59 の範囲チェック
• 秒対応(HH:MM:SS): 6桁で2箇所にコロン挿入
• 範囲チェック: 分に変換（h*60+m）して比較

関連記事: 日付入力にスラッシュを自動挿入する方法 / 郵便番号にハイフンを自動挿入する方法 / フォームバリデーション完全ガイド

よくある質問（FAQ）