I have made a simple form where I should enter a phone number split into three section first input takes 3, second input takes 3 and last should take 4. I have set maxlength for the input elements, I'm calling the keyup to focus on to the next element. But instead of 3 strokes it jumps to the next input after I enter a single number.
Here's my codesandbox for you to play around
Here's my HTML
<div class="form-group" style="height:70px;">
<label class="reg_txt">Phone Number <span>*</span></label>
<div class="clearfix"></div>
<div class="wsite-form">
<input type="text" class="text input-name1" formControlName="phone1" maxlength="3" (keyup)="nextStep($event,1)" (focus)="focused(1)" id="code1">
</div>
<div class="line">-</div>
<div class="wsite-form">
<input type="text" class="text input-name1" formControlName="phone2" maxlength="3" (keyup)="nextStep($event,2)" (focus)="focused(2)" id="code2">
</div>
<div class="line">-</div>
<div class="wsite-form">
<input type="text" class="text input-name1" formControlName="phone3" maxlength="4" (keyup)="nextStep($event,3)" (focus)="focused(3)" id="code3">
</div>
</div>
Here's my component method
nextStep(event, step: number): void {
const prevElement = document.getElementById('code' + (step - 1));
const nextElement = document.getElementById('code' + (step + 1));
console.log(event)
if (event.code == 'Backspace' && event.target.value === '') {
event.target.parentElement.parentElement.children[step - 2 > 0 ? step - 2 : 0].children[0].value = ''
if (prevElement) {
prevElement.focus()
return
}
} else {
if (nextElement) {
nextElement.focus()
return
} else {
}
}
}
and also If I hit backspace it should jump to previous element it works for the second input box and it throws error for the last element. I know I made a silly mistake, could anybody point me in the right direction. I'll appreciate any help.
You can also create a directive (*) like
@Directive({
selector: 'input[maxlength]',
exportAs: 'child'
})
export class MaxLengthDirective {
@Input()prev:HTMLElement;
@Input()next:HTMLElement;
@HostListener('keyup',['$event']) _(event:any){
if (!event.target.value && this.prev && event.key=='Backspace')
this.prev.focus()
if (event.target.value.length==this.maxLength && this.next)
this.next.focus()
}
constructor(@Attribute('maxlength') private maxLength:number){}
}
You can use like
<input #one maxlength="3" [next]="two">
<input #two [prev]="one" [next]="three" maxlength="4">
<input #three [prev]="two" maxlength="5">
See the stackbliz
(*)Don't forget include in declarations of your module
Update Yes, I think also that is a bit complex use the template reference variables and [prev] and [next] so, Why not improve?
For this we use two directives
@Directive({
selector: 'input[maxlength]',
exportAs: 'child'
})
export class MaxLengthDirective {
@HostListener('keyup',['$event']) _(event:any){
if (!event.target.value && event.key=='Backspace')
this.parent.prev(this)
if (event.target.value.length==this.maxLength)
this.parent.next(this)
}
constructor(@Attribute('maxlength') private maxLength:number,@Optional() @Host() private parent:MaxLengthGroupDirective,public elementRef:ElementRef){
}
}
@Directive({
selector: '[maxLengthGroup]',
exportAs: 'maxLengthGroup'
})
export class MaxLengthGroupDirective {
@ContentChildren(MaxLengthDirective) items:QueryList<MaxLengthDirective>
next(item:MaxLengthDirective)
{
const index=this.items.toArray().findIndex(x=>x==item);
if (index<this.items.length-1)
{
const nextItem=this.items.find((_,i)=>i>index)
nextItem.elementRef.nativeElement.focus()
}
}
prev(item:MaxLengthDirective)
{
const index=this.items.toArray().findIndex(x=>x==item);
if (index>0)
{
const prevItem=this.items.find((_,i)=>i==index-1)
prevItem.elementRef.nativeElement.focus()
}
}
}
The max-length-group get the max-length using ContentChildren. So we has in a QueryList all the inputs that has matlength. Two functions inside "next" and "prev" are who focus in the prev or in the next element. For this, we need inject in the mat-length the max-length-group using @Host that indicate to Angular to search this directive. The use is like
<div max-length-group>
<input maxlength="3" placeholder="max 3" />
<input placeholder="max 4" maxlength="4" />
<input placeholder="max 5" maxlength="5" />
</div>
The new stackblitz
Adding this if (nextElement && event.target.value.length === 3) to your else statement at the bottom of nextStep() works instead of just if (nextElement).
If there is a next element to go to and the current length of the input is 3, focus on the next element.