当用户在第一个输入字段中输入了 maxLength 数量的字符时,我想将焦点从一个输入字段移动到另一个输入字段。因此,在我下面的示例中,当用户在日输入中输入 2 个字符时,焦点将移至月输入。
到目前为止,这是我的代码:
<input formControlName="day" maxlength="2" placeholder="DD" type="text" (keyup)="keytab($event)" />
<input formControlName="month" maxlength="2" placeholder="MM" type="text" (keyup)="keytab($event)" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />
在我的 TS 文件中:
keytab(event){
let nextInput = event.srcElement.nextElementSibling; // get the sibling element
var target = event.target || event.srcElement;
var id = target.id
console.log(id.maxlength); // prints undefined
if(nextInput == null) // check the maxLength from here
return;
else
nextInput.focus(); // focus if not null
}
我知道我的 TS 文件中的代码是错误的,但我试图找到一种获取 maxLength 属性然后转移焦点的方法。现在,只要输入字段中有按键,焦点就会移动。
谁能告诉我如何从 keytab 函数访问 inputs maxLength 属性?谢谢。
我正在使用 Angular 4。
编辑 - 我正在尝试获取 maxLength 值,然后与输入值长度进行比较。如果输入值更多,则将焦点移动到输入字段。
最佳答案
这是一个通用的(指令)解决方案,当达到最大长度时移动到下一个类似的控件类型
1- 创建指令
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: 'input[moveNextByMaxLength], textarea[moveNextByMaxLength]',
})
export class MoveNextByMaxLengthDirective {
@HostListener('keyup', ['$event']) onKeyDown(keyboardEvent: KeyboardEvent) {
const target = keyboardEvent.target as
| HTMLInputElement
| HTMLTextAreaElement
| null;
if (!target || target.maxLength !== target.value.length) return;
keyboardEvent.preventDefault();
const { type } = target;
let { nextElementSibling } = target;
while (nextElementSibling) {
if (
(nextElementSibling as HTMLInputElement | HTMLTextAreaElement).type ===
type
) {
(nextElementSibling as HTMLInputElement | HTMLTextAreaElement).focus();
return;
}
nextElementSibling = nextElementSibling.nextElementSibling;
}
}
}
2- 在模块中声明指令
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
MoveNextByMaxLengthDirective
],
bootstrap: [ AppComponent ]
})
3- 在组件中使用指令
<input formControlName="day" maxlength="2" moveNextByMaxLength placeholder="DD" type="text" (keyup)="keytab($event)" />
<input formControlName="month" maxlength="2" moveNextByMaxLength placeholder="MM" type="text" (keyup)="keytab($event)" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />
关于javascript - 达到 maxLength 时将输入焦点移至下一个输入 - Angular 4/Typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47549502/