Javascript jQueryで時刻入力チェックと時刻入力制限する方法

入力された後、チェックロジックを実行して、正しい入力がされているかを判断する場合に利用します。テキストインプットには、あらかじめ「style="ime-mode: disabled"」を入れておくことをおすすめします。

/**
 * 時刻型かチェック
 * @param value 対象文字列
 * @returns 時刻型文字列
 */
function isTimeType(value) {
  var times = value;
  if ( times == null )
    return;
  if ( !times.match(/^d{1,2}:d{2}$/) ) {
    alert('時刻型で入力してください(1)');
    return value;
  }
  var al = times.split(":");
  if ( parseInt(al[0],10) < 0 || parseInt(al[0],10) > 23 || parseInt(al[1],10) < 0 || parseInt(al[1],10) > 59 ) {
    alert('時刻型で入力してください(2)');
    return value;
  }
  return times;
}

それでは細かな説明をしていきます。

正規表現を使って書式が正しいかチェックします。

times.match(/^d{1,2}:d{2}$/)

「:」で split して時間と分にわけます。時が0時～23時までの範囲、分が0分～59分の範囲内かをチェックします。

var al = times.split(":");
parseInt(al[0],10) < 0 || parseInt(al[0],10) > 23 || parseInt(al[1],10) < 0 || parseInt(al[1],10) > 59 )

1. 12時間制の場合は、23の部分を12に変更してください。
2. 26時とかテレビ業界的な時間管理がされる場合は、同じく23の部分を26などに変更してください。
3. parseIntの第二引数に10としているのは、10進数で変換するためです。

呼び出し元は jQuery で書いておきましょう。ここでは jQuery 2.1.4 を利用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
$("#text1").blur(function(){$(this).val(isTimeType($(this).val()));});

htmlはこんな感じです。

<input type="text" id="text1" size="3" value="00:00" maxlength="5" style="ime-mode:disabled" />：時刻型で入力してください。(hh24:mm)

・Javascript(jQuery)時間入力制御 デモページはこちら

テキストインプットの入力制限はプラグインを使って数値入力のみとします。プラグインの詳細については「Javascript jQueryで半角・数字・かな入力チェックと数値入力制限する方法」を参考にしてください。

スクリプトを配置します。ここでは jQuery 2.1.4 を利用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.numeric.js"></script>

「0～9」の正の整数のみ利用できるよう jQuery を記述します。時刻の区切り文字である「:」は入力できません。

<script type="text/javascript">
$(".positive-integer").numeric({ decimal: false, negative: false });//正の整数
$(".right-click-paste").change(function() {$(this).keyup();});//右クリック貼り付け制御
</script>

チェックソースは上述の応用です。

/**
 * 時刻型かチェック
 * @param value 対象文字列
 * @param defVal デフォルト値
 * @returns 時刻型文字列
 */
function isTime(value, defVal) {
  var times = value;
  if ( times == null )
    times = defVal;
  if ( times.length == 3 )
    times = "0" + times;
  if ( times.length == 4 )
    times = times.substring(0,2) + ":" + times.substring(2,4);
  if ( !times.match(/^d{1,2}:d{2}$/) ) {
    times = defVal;
  var al = times.split(":");
  if ( parseInt(al[0],10) < 0 || parseInt(al[0],10) > 23 || parseInt(al[1],10) < 0 || parseInt(al[1],10) > 59 )
    times = defVal;
  return times;
}

時刻型でない場合、アラートは出さずに「00:00」を自動でセットします。

if ( times.length == 3 )
  times = "0" + times;

書式としては「hh24:mm」なので、111と入力されたら01:11となるよう自動で調整しています。

if ( times.length == 4 )
  times = times.substring(0,2) + ":" + times.substring(2,4);

上記と同じく書式としては「hh24:mm」なので、1234と入力されたら12:34となるよう自動で調整しています。

フォーカス取得に区切り文字である「:」を削除し、テキストを選択状態にしています。

$("#text2").focus(function(){$(this).val($(this).val().replace(":",""));$(this).select();});

フォーカス喪失時に「:」を付加する記述を追加します。

$("#text2").blur(function(){$(this).val(isTime($(this).val(),"00:00"));});

htmlはこんな感じです。

<input type="text" id="text2" size="3" value="00:00" maxlength="4" class="positive-integer right-click-paste">：時刻型で入力してください。(hh24:mm)

・Javascript(jQuery)時間入力制御 デモページはこちら

Javascript、jQueryを使って時刻入力チェックと時刻入力制限する方法を紹介しました。

実務では時間の管理は重要な要素です。出退勤やスケジュールの管理など、利用されるケースは多岐に渡ります。間違いが許されない中でどうチェックを作るかというのは非常に難しい問題ですね。

今回紹介した以外の方法でもチェックや制限をかける方法があると思いますので、ぜひチェックしてみてください。

また紹介した方法で不備などあればコメントでご指摘いただけると助かります。