输入数字后如何自动将焦点移动到下一个字段？答案

【问题标题】：How to automatically move focus to next field after entering a digit?输入数字后如何自动将焦点移动到下一个字段？
【发布时间】：2019-11-25 08:27:12
【问题描述】：

我正在将代码从 Google 表格移植到 NativeScript。

我有一个表单，其中的字段只允许使用一位数字 [1..9]。在 Google 表格中，我使用菜单数据 - 数据验证来设置字段规则：

在 NativeScript 中，我找到了必须使用的 TextField 的这些属性：keyboardType、maxLength。所以我的 XML 代码如下所示：

<TextField text="{{ number }}" hint="" maxLength="1" keyboardType="number"/>

除了两件事之外一切正常：

如果用户输入了错误的数字，它不会显示警告。 “0”是不允许的。
如果用户输入正确的数字（从 1 到 9），它不会将焦点移到下一个字段。

我知道 HTML 输入字段具有特殊属性“模式”，您可以在其中 “指定检查元素值的正则表达式”。

如何在 NativeScript 中做类似的事情？用户输入正确的数据（数字）后，如何将焦点移到下一个字段？

【问题讨论】：

您可以使用与 HTML 中相同的正则表达式，在文本字段上发生 textChange 事件时，您应使用正则表达式验证输入值，如果它失败并使用警告消息更新您的 UI。您必须为下一个文本字段分配一个 id，通过 id 获取它，如果成功则调用 focus() 方法。

标签： javascript nativescript android-textinputlayout nativescript-telerik-ui

【解决方案1】：

对于上面提到的 Nativescript 文本字段，您可以在 typescript 中使用角度验证来验证模式以及 html 上的 formcontrol，如下所示：

<FlexboxLayout width="100%" [formGroup]="loginForm">
<TextField class="textfield" maxLength="10" keyboardType="number" formControlName = "mobile" hint="{{'enter'|L}} {{'mobile'|L}}"></TextField>
</FlexboxLayout>

确保在TS中使用表单控件获取表单的值，方法是先声明表单控件，然后通过表单获取值。

this.loginForm = new FormGroup({
        'mobile':new FormControl(null,[Validators.required,Validators.pattern(Constant.MOBILE_PATTERN_WO_QUOTE)]),
    });

从表单中获取值：

value = this.loginForm.value.mobile;

您可以使用 TextField 组件上可用的 textChange 回调函数来检查验证和长度。完成后，使用页面函数获取下一个要关注的文本字段的视图。

constructor(
    private page:Page
) {}

onTextChange(args){
    let textfield = args.object as TextField;
    
    if(textfield.text.length==1){
    let nextTextfield = this.page.getViewById('password') as TextField; 
    nextTextfield?.focus(); 
}

如果你想清除焦点，你可以使用这样的东西，

textfield.nativeView.clearFocus();

【讨论】：