Javascript jQueryで時刻入力チェックと時刻入力制限する方法 ホームページ制作 | 墨田区

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

LINEで送る
Pocket

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

時刻といえば、12時間表示だったり、24時間表示だったりと、どうチェックするか悩みますよね。実務では時間管理は重要です。業界によっては25時とか26時などで扱われることもあります。チェックの方法としては、入力されたものをチェックしたい場合と入力自体を制限したい場合があります。

ここでは 時:分(hh24:mm)での24時間チェックの方法と入力制限方法 をご紹介します。

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




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


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)で時刻入力制御

テキストインプットの入力制限はプラグインを使って数値入力のみとします。
プラグインの詳細については こちら を参照ください。
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)時間入力制御 デモページはこちら


まとめ

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

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

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


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL