テキストフィールドの型が自動的にhh：mmのように書式設定されている場合

Question

ユーザーがテキストフィールドに入力するときに自動的にhh：mmの書式を設定しようとしています。最初は00:00で、ユーザーが最初の2文字を入力すると、分が入力され、3番目と4番目の文字を入力すると、時間部分が自動入力されます。カスタムスクリプトを作成しましたが、バグがあります。誰かがそれを解決するのを助けることができますか？またはいくつかのJqueryライブラリがある場合は、私にお勧めします。入力マスクも試しました。しかし、それは私の必要条件を持っていません。また、カーソルが右側から始まる必要があります。次のように 私のHTMLは

検証を取っ

var num_order = ""; 
 
var last_input = ""; 
 
var length = 0; 
 

 
var result_str = "00:00"; 
 

 
$('#price').bind('keydown', function(evt) { 
 
    //alert(String.fromCharCode(evt.keyCode)); 
 
    length = num_order.length; 
 

 
    if (length < 4) { 
 
    if (evt.keyCode == 8) { 
 
     num_order = num_order.substring(0, num_order.length - 1); 
 
    } else { 
 
     last_input = String.fromCharCode(evt.keyCode); 
 

 
     if (last_input > 0) { 
 
     num_order = num_order + last_input; 
 
     //alert(num_order); 
 
     } else { 
 

 
     } 
 
    } 
 
    } else { 
 
    if (evt.keyCode == 8) { 
 
     num_order = num_order.substring(0, num_order.length - 1); 
 
    } 
 
    } 
 
    //alert(num_order); 
 
    var result = update_input(num_order); 
 
    //$("#price").val(""); 
 
    $("#price").val(result); 
 
}); 
 

 
var result = update_input(num_order); 
 
//$("#price").val(""); 
 
$("#price").val(result); 
 

 
function update_input(str) { 
 
    length = str.length; 
 
    if (length == 0) { 
 
    result_str = "00:00"; 
 
    } else if (length == 1) { 
 
    //alert(str); 
 
    result_str = "00:0" + str; 
 
    //alert(result_str); 
 
    } else if (length == 2) { 
 
    result_str = "00:" + str; 
 
    } else if (length == 3) { 
 
    var first2 = str.substring(0, 2); 
 
    var last1 = str.substring(2, 3); 
 
    result_str = "0" + last1 + ":" + first2; 
 
    } else if (length == 4) { 
 
    var first2 = str.substring(0, 2); 
 
    var last2 = str.substring(2, 4); 
 
    result_str = last2 + ":" + first2; 
 
    } 
 

 
    //$("#price").val(""); 
 
    //$("#price").val(result_str); 
 
    return result_str; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input type="text" id="price" value="00:00" />

Answer 1

が切断、例の下のKeyDownがこれを処理するのに最適な場所ではないという事実によって始め、4桁の数字を維持する方法を示しています

[EDIT]しかし、これはトラックに戻ってあなたを置く（または多分ない）かもしれないが、

を素敵に見えないのkeydownとからkeyupの間にグリッチがあるので、あなたの最終的な解決策になることはほとんどありません

$("#price").val('00:00'); // init 
 

 
$('#price').bind('keyup',function(evt){ 
 
    let last_input= String.fromCharCode(evt.keyCode); 
 
    console.log('new char: ' + last_input); 
 
    let str = $('#price').val(); 
 
    console.log('before: ' + str); // char was already added 
 
    str = str.replace(/:/, ''); // drop the colon 
 
    console.log('without colon: ' + str); 
 
    //str += last_input; 
 
    if (str.length < 4) { 
 
    str = '0000' + str; // fill zeros on front (cut excess below) 
 
    } 
 
    if (str.length > 4) { 
 
    str = str.substring(str.length - 4, str.length); // drop front 
 
    } 
 
    console.log('about to insert colon: ' + str); 
 
    str = str.substring(0, 2) + ':' + str.substring(2, 4); 
 
    console.log('after: ' + str); 
 
    $("#price").val(str); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input type="text" id="price" value="00:00" />