텍스트 필드의 유형이 hh : mm과 같이 자동으로 서식을 지정할 때

Question

사용자가 텍스트 필드에 입력 할 때 hh : mm 형식을 자동으로 지정하려고합니다. 처음에는 00:00이고 사용자가 처음 두자를 입력하면 분 부분을 채워야하며 세 번째와 네 번째 문자를 입력 할 때 시간 부분을 자동으로 채워야합니다. 사용자 지정 스크립트를 만들었지 만 버그가있는 것으로 보입니다. 누군가가 저를 해결하도록 도울 수 있습니까? 또는 Jquery 라이브러리가 있다면 제게 제안하십시오. 나는 또한 입력 마스크를 시도했다. 그러나 그것은 나의 요구를 가지고 있지 않습니다. 또한 커서가 오른쪽에서 시작해야합니다. 검증이 차단 복용

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 자리 숫자를 유지하는 방법을 보여줍니다 아래 내 HTML이며,

[편집]을하지만,이 (아마되지 않았거나) 트랙에 당신을 다시 넣을 수도 있지만 좋은 보이지 않는를 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" />