style : added proper backspace to input boxes
This commit is contained in:
parent
531a2b8f83
commit
6621298e81
File diff suppressed because one or more lines are too long
@ -26,48 +26,61 @@ export class LoginComponent {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
setFocus(field: 'email' | 'password') {
|
setFocus(field: 'email' | 'password'): void {
|
||||||
this.focusedField = field;
|
this.focusedField = field;
|
||||||
}
|
}
|
||||||
|
|
||||||
onNumpadClick(value: string) {
|
onNumpadClick(value: string): void {
|
||||||
if (!this.focusedField) return;
|
if (!this.focusedField) return;
|
||||||
|
|
||||||
const control = this.loginForm.get(this.focusedField);
|
const control = this.loginForm.get(this.focusedField);
|
||||||
const current = control?.value || '';
|
const current = control?.value || '';
|
||||||
const newValue = current + value;
|
const newValue = current + value;
|
||||||
|
|
||||||
// Set the form control value
|
// Update form control
|
||||||
control?.setValue(newValue);
|
control?.setValue(newValue);
|
||||||
|
|
||||||
// Set the input element value directly
|
// Update input element directly
|
||||||
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
||||||
inputRef.nativeElement.value = newValue;
|
inputRef.nativeElement.value = newValue;
|
||||||
|
|
||||||
// Refocus to fix cursor position
|
// Focus and move cursor to the end
|
||||||
setTimeout(() => inputRef.nativeElement.focus(), 0);
|
setTimeout(() => {
|
||||||
|
const el = inputRef.nativeElement;
|
||||||
|
el.focus();
|
||||||
|
el.setSelectionRange(newValue.length, newValue.length);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
// Trigger change detection
|
// Trigger change detection
|
||||||
this.cdRef.detectChanges();
|
this.cdRef.detectChanges();
|
||||||
}
|
}
|
||||||
|
|
||||||
onBackspace() {
|
onBackspace(): void {
|
||||||
if (!this.focusedField) return;
|
if (!this.focusedField) return;
|
||||||
|
|
||||||
const control = this.loginForm.get(this.focusedField);
|
const control = this.loginForm.get(this.focusedField);
|
||||||
const current = control?.value || '';
|
const current = control?.value || '';
|
||||||
const newValue = current.slice(0, -1);
|
const newValue = current.slice(0, -1);
|
||||||
|
|
||||||
|
// Update form control
|
||||||
control?.setValue(newValue);
|
control?.setValue(newValue);
|
||||||
|
|
||||||
|
// Update input element directly
|
||||||
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
||||||
inputRef.nativeElement.value = newValue;
|
inputRef.nativeElement.value = newValue;
|
||||||
|
|
||||||
setTimeout(() => inputRef.nativeElement.focus(), 0);
|
// Focus and move cursor to the end
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = inputRef.nativeElement;
|
||||||
|
el.focus();
|
||||||
|
el.setSelectionRange(newValue.length, newValue.length);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// Trigger change detection
|
||||||
this.cdRef.detectChanges();
|
this.cdRef.detectChanges();
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit() {
|
onSubmit(): void {
|
||||||
console.log(this.loginForm.value);
|
console.log(this.loginForm.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user