在HTML中使用Angular的ngModel指令绑定一个时间输入框,并使用一些JavaScript代码来为输入框添加一个固定的冒号,并在输入两个数字后自动跳到下一个数字。
HTML代码示例:
JavaScript代码示例:
export class AppComponent {
time: string = '12:00';
timeInputKeyDown(event: KeyboardEvent) {
if (event.keyCode === 8) { // backspace
if (this.time[this.time.length - 1] === ':') {
this.time = this.time.slice(0, -2);
}
} else if (!isNaN(Number(event.key))) { // number key
if (this.time.length === 2) {
this.time += ':';
}
this.time += event.key;
event.preventDefault();
if (this.time.length === 5) {
(event.target as HTMLInputElement).blur();
}
} else if (event.keyCode === 39 || event.keyCode === 9) { // right arrow or tab
if (this.time[this.time.length - 1] === ':') {
event.preventDefault();
this.time += '0';
}
} else {
event.preventDefault();
}
}
}