如何通过使用 Ionic2 在 iPhone/iPad 上点击返回键进入下一个输入？

Posted 2023-02-23

【中文标题】如何通过使用 Ionic2 在 iPhone/iPad 上点击返回键进入下一个输入？

【英文标题】：How to go to next input by tapping return key on an iPhone/iPad with Ionic2?

【发布时间】：2017-12-23 10:12:39

【问题描述】：

我正在使用 Ionic Cordova 构建一个 iPhone 应用程序。我有一个登录屏幕用户名输入和密码输入以及一个提交按钮。输入用户名并点击“返回”后，我无法专注于密码输入。

我的 login.html 如下所示：

<ion-list >
     <ion-item>
<div id="loginlogo"></div>
     </ion-item>
      <ion-item>
        <ion-label stacked>Username</ion-label>
        <ion-input type="text" name="usernameInput"  (keyup.enter)="focusAndGo()" [(ngModel)]="usernameInput"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" id="passwordInput"  name="passwordInput" [(ngModel)]="passwordInput"></ion-input>
      </ion-item>
     <ion-item><button (click)="logincontrol()" ion-button color="light" block>Login</button></ion-item>
    </ion-list>

我的 login.ts 看起来像这样：

@ViewChild('passwordInput') nameInput;
  focusAndGo()
  
    var input = document.getElementById('passwordInput');
    input.focus();
    this.nameInput.setFocus();
    //this.nameInput.nativeElement.focus();
    //this.nameInput.nativeElement.setFocus();
    //this.passwordInput.focus();
    //alert(event.keyCode );
    //if( event.keyCode ==13)
    //
    //this.passwordInput.focus;
    //       
  

我尝试了上面评论的所有内容。我无法让光标移动到下一个输入。

【参考方案1】：

我认为你应该在设置焦点之前阻止默认行为，

向您的函数发送 $event

<ion-input type="text" name="usernameInput"  (keyup)="focusAndGo($event)" [(ngModel)]="usernameInput"></ion-input>

在设置焦点之前使用 preventDefault()

focusAndGo(e)

    e.preventDefault();
    var input = document.getElementById('passwordInput');
    input.focus();     

【讨论】：

谢谢 NTP。我会尝试，我会告诉你结果。

很高兴能帮上忙。

您好，NTP。对不起，我不在了。我刚刚测试了当我点击返回时光标没有专注于密码输入。我将àlert('test'); 放在函数末尾只是为了测试它是否被调用。当我点击返回键时，它肯定会弹出一个警报，但它并不专注于密码字段。您是否有任何其他建议或想法为什么它不起作用？非常感谢您的帮助。

【参考方案2】：

更新以获得更好的方法：this SO answer （我在收到赞后更新了帖子，但我认为正确的答案是链接中的指示）

这是一篇旧帖子，但有一种可能性是制作一个类似的指令

@Directive(
  selector: '[next-tab]',
)
export class NextTabDirective

  @Input('next-tab') nextControl: any;

  @HostListener("keydown.enter", ["$event"])
  onEnter(event: KeyboardEvent) 
    if (this.nextControl.focus)
    
      this.nextControl.focus();
      event.preventDefault();
      return false;
    
  

然后你可以使用类似的形式

<form [formGroup]="dataForm" (submit)="submit(dataForm)">
   <input        formControlName="data1" [next-tab]="data2">
   <input #data2 formControlName="data2" [next-tab]="data3">
   <input #data3 formControlName="data3">
   <button type="submit">Click</button>
</form>