gpt4 book ai didi

angular - 如何处理angular4中的自动标签

转载 作者:太空狗 更新时间:2023-10-29 17:43:43 24 4
gpt4 key购买 nike

在第一个文本框中输入文本后,我需要移动下一个文本框。在第一个选项卡中输入文本后,它必须自动移动到下一个选项卡。

<div class="autotabbed-container">
<div id="example1" class="autotabbed">
<h3>Bank sort code: XX-XX-XX</h3>
<input type="text" maxlength="2" size="2" />
-
<input type="text" maxlength="2" size="2" />
-
<input type="text" maxlength="2" size="2" />
</div>
</div>

当我在第一个文本框中键入文本时,光标需要移动到下一个文本框。请帮助如何在 Angular 4 中实现这一目标。

如果我想在 ngFor 中应用,相同的代码将不起作用。在下面的代码中,如果我想显示基于 ngFor 循环的文本框。在第一个 td 中,我将显示密码文本框,在下一个 td 中,我将仅显示星号。在这种情况下,我们如何动态应用#input。我只需要指出第一个 td 项目而不是下一个 td 项目。那么在这种情况下我们如何才能实现自动对焦呢。

<tr>
<ng-container *ngFor="let i of dynamicArr, let x = index">
<td *ngIf="i !== '*'">
<input type="password" #input1 formControlName="dyna{{i}}" id="dyna{{i}}" (input) = "onInputEntry($event, input2)" required maxlength="1" />
</td>
<td *ngIf=" i === '*' ">
<img class="flotado_right" id="starimage" src="starimage.jpg" class="dot-image">
</td>
</ng-container>
</tr>

我正在构建如下所示的动态数组,动态文本的值类似于 2、5 和 7。在这种情况下,dynamicArr[2] = 1、dynamicArr[5] = 2、dynamicArr[7] = 3 所以其他值的值dynamicArr 是 *

for (let i = 0; i < 10; i++) {
if (((i + 1) === this.dynamictext[0])) {
this.dynamicArr[i] = '1';
} else if (((i + 1) === this.dynamictext[1])) {
this.dynamicArr[i] = '2';
} else if (((i + 1) === this.dynamictext[2])) {
this.dynamicArr[i] = '3';
} else {
this.dynamicArr[i] = '*';
}
}

最佳答案

如果您想要可重复使用的代码,请尝试使用自定义指令。

指令:

import {Directive, HostListener, Input} from '@angular/core'

@Directive({
selector: '[appAutoTab]'
})
export class AutoTabDirective {
@Input('appAutoTab') appAutoTab

@HostListener('input', ['$event.target']) onInput(input) {
const length = input.value.length
const maxLength = input.attributes.maxlength.value
if (length >= maxLength) {
this.appAutoTab.focus()
}
}
}

(记得在app.module中导入指令)

@NgModule({
declarations: [
AutoTabDirective
]})

HTML

<input #input1 type="text" maxlength="2" [appAutoTab]="input2"/>
<input #input2 type="text" maxlength="2"/>

关于angular - 如何处理angular4中的自动标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48013062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com