Angular Can'；t将焦点设置为提示警报输入

使用Ionic 3，我创建了一个由函数

resetPassword（）

触发的提示警报。我希望它的唯一输入是聚焦，并在显示时打开iOS/Android键盘

这就是功能：

  resetPassword() {
    let prompt = this.alertCtrl.create({
      title: 'Reset Password',
      message: "Enter your email address to receive a password reset email",
      inputs: [
        {
          name: 'email',
          placeholder: 'Email',
          type: 'email'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked', data);
          }
        },
        {
          text: 'Send',
          handler: data => {
            console.log('Send clicked');    
          }
        }
      ]
    });
    prompt.present().then(() => {
      console.log("presenting")
      const firstInput: any = document.querySelector('ion-alert input');
      console.log("alert input", JSON.stringify(firstInput))
      firstInput.focus();
      return;
    });
  }

使用.focus（）似乎不起作用。 日志

JSON.stringify（firstInput）

在iOS上显示以下内容：

{
  "__zone_symbol__ngModelChangefalse": [{
    "type": "eventTask",
    "state": "scheduled",
    "source": "HTMLInputElement.addEventListener:ngModelChange",
    "zone": "angular",
    "runCount": 0
  }],
  "__zone_symbol__inputfalse": [{
    "type": "eventTask",
    "state": "scheduled",
    "source": "HTMLInputElement.addEventListener:input",
    "zone": "angular",
    "runCount": 0
  }],
  "__zone_symbol__blurfalse": [{
    "type": "eventTask",
    "state": "scheduled",
    "source": "HTMLInputElement.addEventListener:blur",
    "zone": "angular",
    "runCount": 0
  }],
  "__zone_symbol__compositionstartfalse": [{
    "type": "eventTask",
    "state": "scheduled",
    "source": "HTMLInputElement.addEventListener:compositionstart",
    "zone": "angular",
    "runCount": 0
  }],
  "__zone_symbol__compositionendfalse": [{
    "type": "eventTask",
    "state": "scheduled",
    "source": "HTMLInputElement.addEventListener:compositionend",
    "zone": "angular",
    "runCount": 0
  }]
}

---

如何解决此问题？

您可以对输入应用cssClass。在代码中

inputs: [
  {
     name: 'email',
     placeholder: 'Email',
     type: 'email'
     cssClass: 'customClass'
  },
]

并将css属性应用于scss文件中的该自定义类

.customClass:focus {
   -css properties here-
}

alert.present（）返回一个承诺。因此，我们可以简单地添加以下行以实现预期的行为

alert.present().then(() => {
const firstInput: any = document.querySelector('ion-alert input');
firstInput.focus();
return;

}))

由于这个事实，querySelector（）；allways获取第一个结果，它将聚焦第一个输入元素，该元素位于显示的警报中

如果要聚焦第二个、第三个等，应更改
querySelector（“离子警报输入”）
到
querySelectorAll（'ion-alert input'）[1]
，1作为第二个输入元素的占位符

在config.xml文件中，不要忘记添加这一行

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

不幸的是，这种技巧只能在Android上使用，因为iOS 10+左右的苹果只想让用户明确地设置对输入元素的关注，而不支持对未来元素的编程关注。思考是为了防止各种恶意意图。但是是的，它是sux，因为UX的一些良好实践也受到了影响/您是否也在config.xml中尝试了“KeyboardDisplayRequiresAction”？