Kann dynamisch hinzugefügt Doppelpunkt nicht löschen

Question

Ich brauche eine Funktion, die den Doppelpunkt (:), nachdem Sie zwei Zahlen in Eingabe eingeben und ich fand this solution hier auf StackOverflow als auch was ich brauche. Es fügt Doppelpunkt nach getippter zweiter Nummer hinzu und lässt Sie nicht mehr als 4 Zahlen hinzufügen.

Allerdings gibt es ein Problem, das ich nicht verstehen und lösen kann. Ich muss in der Lage löschen alle Nummern, aber es wird mich nicht lassen. Ich kann nur die letzten zwei löschen, und Sie können den Doppelpunkt nicht löschen. Hier

ist der aktuelle Code:

var time = document.getElementsByClassName('time'); 
for (var i = 0; i < time.length; i++) { 
    time[i].addEventListener('keyup', function (e) { 
     var reg = /[0-9]/; 
     if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number 
     if (this.value.length > 5) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5 
    }); 
}; 

https://jsfiddle.net/bubxm7pe/

Answer 1

Sie Bedingung für Backspace hinzufügen können mit e.keyCode

Es funktioniert here

if (e.keyCode != 8) 
{ 
     var reg = /[0-9]/; 
     if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number 
     if (this.value.length > 5) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5   
} 

Update: Sie können auch einschränken Benutzer mit Ziffer s wie folgt. Es funktioniert auch here

//called when key is pressed in textbox 
$(".time").keypress(function (e) { 

    //if the letter is not digit then don't type anything 
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
     return false; 
    } 
    else 
    { 
     var reg = /[0-9]/; 
     if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number 
     if (this.value.length > 4) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5 

    } 

}); 

Answer 2

Anstatt Scheck für delete oder backspace Sie überprüfen können, ob die gedrückte Taste eine Zahl:

if (keycode >= 48 && keycode <= 57) { 
    if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number 
    if (this.value.length > 5) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5 
} 

https://jsfiddle.net/6jbaayqd/

Answer 3

Wie Sie bereits geneigt zu bedienen regex, warum verwenden Sie es dann nicht zum Formatieren der Uhrzeit im Feld input - siehe folgende Demo:

document.getElementsByClassName('time')[0].addEventListener('keyup', function(e) { 
 
    this.value = this.value 
 
    .replace(/[^\d]/g, '') // allow only digits 
 
    .replace(/^([\d]{4})\d+$/g, '$1') // restrict to 4 chars 
 
    .replace(/\B(?=(\d{2})+(?!\d{1}))/g, ":"); // place the colon 
 

 
});

<input class="time" />