NativeScript Angular文本字段-将“安全”属性从true更改为false时，光标与文本的距离太远（iOS）

Question

And here's a Playground sample of the issue-在点击显示/隐藏按钮以查看问题时，确保光标在文本字段中。

我有一个简单的TextField供用户在我的NS + Angular应用中输入密码。我正在尝试实现显示/隐藏功能。这是我尝试过的：

    dat.[x, y] <- dat.[x, y] + 1

在.ts文件中，我正在如下初始化相关变量：

    <GridLayout rows="auto, auto" class="field" row="0">
        <Label text="Password" class="field-label" *ngIf="focused" textWrap="true" row="0"></Label>
        <TextField hint="Password" [ngClass]="{'field-text': true, 'inactive': !focused}" [secure]="pwdSecure" 
            formControlName="password" [(ngModel)]="password" 
            (ngModelChange)="focused = password.length ? true : false" 
            (blur)="focused = password.length ? true : false" returnKeyType="next" (returnPress)="focusConfirmPwd()" row="1">
        </TextField>
        <Label *ngIf="focused" [text]="pwdSecure ? 'show' : 'hide'" (tap)="pwdSecure = !pwdSecure" class="secure pull-right" textWrap="true" row="1"></Label>
    </GridLayout>

当我点击“隐藏”时，密码掩码显示得很好。但是，当我点击“显示”时，会显示密码文本，但是文本和光标之间的空间太大。光标保留在有遮罩的位置。

您知道我需要做什么来解决此问题吗？

谢谢！

Answer 1

我已经在android上的bug中测试了您的情况，在ios上工作正常。 因此，解决您的问题的方法是，每当用户点击“隐藏/显示标签”时，将光标设置在文本的末尾。

1. 为文本文件添加焦点事件，并将文本字段分配给变量以进一步使用。

  <TextField [ngClass]="{'field-text': true, 'inactive': !focused}" (focus)="onFocus($event)" hint="Password" [secure]="pwdSecure" [(ngModel)]="textFieldValue" (ngModelChange)="focused = password.length ? true : false"
            row="1" (blur)="focused = password.length ? true : false"></TextField>

    <Label *ngIf="focused" [text]="pwdSecure ? 'show' : 'hide'" (tap)="chandPwdtype()" class="secure pull-right" textWrap="true" row="1"></Label>

1. 将代码添加到您的.ts文件

从'tns-core-modules / ui / text-field / text-field'导入{TextField};

从'tns-core-modules / platform / platform'导入{isAndroid};

  

onFocus（e）{this.textfield = e.object; }

chandPwdtype() {
    this.pwdSecure = !this.pwdSecure
    if (isAndroid) {
        setTimeout(() => {
            alert(this.textfield);
            this.textfield.android.setSelection(this.textFieldValue.length);
        }, 0);
    }else{
        let newPosition = this.textfield.ios.endOfDocument;
        //alert(this.textfield.ios.beginningOfDocument);
        //alert(this.textfield.ios.endOfDocument);
        this.textfield.ios.selectedTextRange = 
        this.textfield.ios.textRangeFromPositionToPosition(newPosition, newPosition);
}

如果您想进一步说明，请查看playground，它在两个平台上都可以正常工作。