我做了一个简单的表单，我应该在其中输入一个电话号码，分为三个部分:第一个输入需要3，第二个输入需要3，最后一个输入需要4。我已经为输入元素设置了maxlength，我调用keyup来关注下一个元素。但是，在我输入一个数字后，它会跳到下一个输入，而不是3次输入。
这是我的codesandbox供您使用
我的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>
这是我的组件方法
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 {
}
}
}
，如果我按退格键，它应该跳转到前一个元素，它对第二个输入框有效，对最后一个元素抛出错误。我知道我犯了一个愚蠢的错误，谁能给我指个正确的方向?我很感激你的帮助。
你也可以创建一个指令(*)，如
@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){}
}
你可以使用like
<input #one maxlength="3" [next]="two">
<input #two [prev]="one" [next]="three" maxlength="4">
<input #three [prev]="two" maxlength="5">
参见stackbliz
(*)不要忘记在你的模块声明中包含
是的，我也认为使用模板引用变量和[prev]和[next]有点复杂，为什么不改进呢?
对于，我们使用两个指令
@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()
}
}
}
max-length-group使用ContentChildren获取最大长度。我们在QueryList中有所有有matlength的输入。&;next&;里面有两个函数和";prev"关注上一个或下一个元素的人。为此，我们需要在mat-length中注入max-length-group，并使用@Host指示Angular搜索该指令。用法类似于
<div max-length-group>
<input maxlength="3" placeholder="max 3" />
<input placeholder="max 4" maxlength="4" />
<input placeholder="max 5" maxlength="5" />
</div>
将if (nextElement && event.target.value.length === 3)添加到nextStep()底部的else语句中，而不仅仅是if (nextElement)。
如果有下一个元素要到并且当前输入的长度为3，则关注下一个元素。