我的 Angular 14 應用程式中有以下輸入欄位：
<mdb-form-control>
<input id="arrivalTime" mdbInput
type="text" class="form-control" placeholder="--:--"/>
<label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>
我想知道如何添加一個永久的“：”，這樣當用戶輸入時間時，它會自動跳到冒號的另一側
基本上像這樣： https ://www.npmjs.com/package/jquery-clock-timepicker
謝謝
uj5u.com熱心網友回復：
您可以創建自定義指令來格式化時間
@Directive({
selector: '[appFormatTime]',
})
export class FormatTimeDirective {
constructor(private element: ElementRef) {}
@HostListener('input') logChange() {
let val = this.element.nativeElement.value.replace(/:/g, '');
val = val.match(/.{1,2}/g).join(":")
this.element.nativeElement.value = val.substring(0, 5);
}
}
<mdb-form-control>
<input
id="arrivalTime"
mdbInput
type="text"
class="form-control"
placeholder="--:--"
appFormatTime
/>
<label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>
uj5u.com熱心網友回復：
基本上你需要監聽輸入欄位的更改事件。在函式中，您定義何時放置冒號的條件。同樣在事件處理程式中，您可以使用該<control>.setSelectionRange方法相應地設定游標位置。您甚至可以使用自定義pipe函式來相應地設定冒號。檢查setSelectionRange的檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/514946.html
標籤：有角度的打字稿