文本字段焦点（）不起作用答案

【问题标题】：TextField focus() not working文本字段焦点（）不起作用
【发布时间】：2016-10-20 08:35:55
【问题描述】：

使用 sample-Groceries-angular 我正在尝试通过单击按钮来关注密码而不是电子邮件

┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 2.3.0           │ 2.3.0          │ Up to date    │
│ tns-core-modules │ 2.3.0           │ 2.3.0          │ Up to date    │
│ tns-android      │ 2.3.0           │ 2.3.0          │ Up to date    │
│ tns-ios          │                 │ 2.3.0          │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

xml:

<TextField #email hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
autocorrect="false" autocapitalizationType="none"></TextField>
<TextField #password hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
<Button text="Focus Password" (tap)="focusDat()"></Button>

打字稿：

@ViewChild("password") password: ElementRef;
focusDat() {
  let password = <TextField>this.name.nativeElement;
  console.log(password.focus());
}

输出：

JS: false

【问题讨论】：

focus() 仅在元素或其中一个子元素具有焦点时才返回它不会将焦点设置在文本字段上并带出键盘，但您可以使用本机 api 设置文本字段唯一的问题，您需要做ios和android方式分开
好吧 api 说它试图聚焦视图docs.nativescript.org/api-reference/classes/… 有没有做同样事情的简单方法？ ://
是的，它尝试聚焦但不设置它的测试是否有可见且简单的软键盘？不确定，因为您需要分别针对每个平台 ios/android 执行此操作
也许问题出在方法上，您尝试focus 字段。关于关注密码字段，请在您的方法this.password.nativeElement.focus(); 中尝试以下代码
@NikolayTsonev 方法很好，它可以做它应该做的，但它被误解了 focus() return true/false 基于软键是否可见并且不会将焦点设置在文本字段上

标签： nativescript angular2-nativescript

【解决方案1】：

感谢 Nikolay Tsonev，我只是专注于错误的领域是：

let password = <TextField>this.name.nativeElement;

应该是：

let password = <TextField>this.password.nativeElement;

它工作正常，只是犯了一个愚蠢的错误......

【讨论】：

【解决方案2】：

你应该参考这个我试图创建OTP机甲。

<TextField col="0" maxlength="1" (textChange)="o1()" verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="one" required #1ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
                <TextField col="1" maxlength="1" #b (textChange)="o2()" verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="two" required #2ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
                <TextField col="2" maxlength="1" #c (textChange)="o3()"verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="three" required #3ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
                <TextField col="3" maxlength="1" #d verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="four" required #4ng="ngModel" returnKeyType="done" keyboardType="number"></TextField>

.ts

    one=''
    two=''
    three=''
    four=''
    @ViewChild("b", { static: false }) b: ElementRef;
    @ViewChild("c", { static: false }) c: ElementRef;
    @ViewChild("d", { static: false }) d: ElementRef;

    o1(){
        this.b.nativeElement.focus()
    }

    o2(){
        this.c.nativeElement.focus()
    }

    o3(){
        this.d.nativeElement.focus()
    }

【讨论】：