【jQuery】時間・時刻の入力で、コロン（:）を自動入力する方法
時間・時刻を表記する際、2桁目と3桁目の間にコロン（:）が入る「12:34」という形式をよく見かけますね。
そして、お問い合わせフォームで時間・時刻を入力してもらう際、2桁目と3桁目の間で自動でコロン（:）が入力されると親切だなと思ったことありませんか？
この機能はjQueryを使うと簡単に実現することが出来ます。
この記事では、時間・時刻の入力の際に2桁目と3桁目の間で自動でコロン（:）が入力する方法をご紹介したいと思います。
完成コード
まずは完成コードを見てみましょう。
HTMLはこちら。name属性はtimeとします。
<input type="text" name="time" placeholder="12:34">jQueryのコードはこちら。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function() {
$('input[name="time"]').on('input', function() {
// 半角数値以外の入力を削除
var time_val = $(this).val().replace(/\D/g, '');
// 4桁を超えた場合その入力値を削除
if (time_val.length > 4) {
time_val = time_val.substring(0, 4);
}
// 2桁目と3桁目の間にコロン（:）を入れる
if (time_val.length > 2) {
time_val = time_val.substring(0, 2) + ':' + time_val.substring(2, 4);
}
// 入力した値をフィールドにセット
$(this).val(time_val);
});
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
ここからはコードの解説です。このコードは以下のように動作します。
$('input[name="time"]').on('input', function() { ... });name属性がtimeのinputタグに入力、削除などがあった時に実行されます。
// 半角数値以外の入力を削除
var time_val = $(this).val().replace(/\D/g, '');半角数値以外の文字が入力された際は自動でその文字を削除されます。
つまり、この入力フィールドは半角数値の入力のみが有効となります。
この段階では、コロン（:）も削除されます。
// 4桁を超えた場合その入力値を削除
if (time_val.length > 4) {
time_val = time_val.substring(0, 4);
}今回作成するフォーマットは「12:34」、コロン（:）を除いた数値だけで4桁なのでそれ以上の入力は不要です。
4桁以上の入力があった場合はその文字を削除します。
つまり、4桁以上は入力出来ないようになっています。
// 2桁目と3桁目の間にコロン（:）を入れる
if (time_val.length > 2) {
time_val = time_val.substring(0, 2) + ':' + time_val.substring(2, 4);
}数値が2桁を超える場合、最初の2桁の後にコロン（:）を自動入力し、その後の2桁を続けます。
これにより、時間・時刻のフォーマット（12:34）が作成されます。
まとめ
いかがでしょうか？
このコードを使うことで、ユーザーが時間・時刻を入力する際に自動的に時間・時刻のフォーマットに整えられ、ユーザーが「1234」と入力すると「12:34」と表示されるようになります。
これにより、ユーザーの入力ミスを減らし、時間・時刻の一貫したフォーマットを確保することが出来ます。
