HTMLのフォームで時間を入力する際：を抜いて入力でき、外れると：をつけたい

Question

時間を入力する際jsで値を変えたい

htmlのinputのフォームで
入力時は【1200】 選択が外れると【12：00】にしたいです。
【200】なども【02：00】にしたいです。

その他時間ではない数字や文字がはいったときは空白にするつもりです。

またできれば、
全角数字全角【：】にも対応したいです

該当のソースコード

<section class="content">
  <form method="post">
    <div>
      <label for="time">時間</label>
      <input type="text" id="time" name="time" value="time" placeholder="">
    </div>
</section>

    let $time = $('#time');

    $time.focusin(function () {
        let value = $(this).val().replace(":", "");
        $(this).val(value);
    });


    $time.focusout(function () {
        if(!isNaN(time)){
            $(this).val("");
        }
        time.value = strIns(time.value, 2, ':');
    });

    function strIns(str, idx, val){
        return str.slice(0, idx) + val + str.slice(idx);
    }

フォーカスインで外れるのは確認できたのですが
アウトでうまく：がついてくれません。
ご教授よろしくお願いします。

補足情報

pythonとhtmlとjq使用しています。

Comments

[m.ts10806]

ちなみに確認したブラウザは何でしょうか。
こちらの手元では「アウトでうまく：がついてくれません。」は起きず、ちゃんとついてくれます。Wiindows10,Chrome85.0（現時点の最新）
jQuery v3.5.1 CDN

気になるのは、しいてなら　200→20:0 になるということくらいでしょうか。
12時間形式か24時間形式か決めないといけないかと思います。

[pepe1122]

ありがとうございます。そうなのですね！
確認したブラウザはchromeでjQuery v3.3.1です。
24時で想定しております。

[m.ts10806]

3.3.1でも動きました。バージョンはあまり関係ないとは思います。
ただ、
12:00→12::00
12::00→12:00
となるので、抜けは結構ありそうです。

Answer 1

どこまでチェックしたいかによりますね
ユーザーには数値しか入れられないようにするほうがよいかと

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const t=document.querySelector('#time');
t.addEventListener('focus',function(){
t.value=t.value.replace(/:/,'');
});
t.addEventListener('input',function(){
if(/[^\d]/.test(t.value)) t.value=t.value.replace(/[^d]/,'');
});
var m;
t.addEventListener('blur',function(){
if(m=t.value.match(/^\d$/)){
t.value=`0${m[0]}:00`;
}else if(m=t.value.match(/^([01]\d|2[0-3])$/)){
t.value=`${m[0]}:00`;
}else if(m=t.value.match(/^(\d)([0-5]\d)$/)){
t.value=`0${m[1]}:${m[2]}`;
}else if(m=t.value.match(/^([01]\d|2[0-3])([0-5]\d)$/)){
t.value=`${m[1]}:${m[2]}`;
}else{
t.value="";
}
});
});
</script>
<form>
<input type="text" id="time" name="time" pattern="([01]\d|2[0-3]):?[0-5]\d" placeholder="">
<input type="submit" value="send">
</form>