Question

使用离子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
  }]
}

该如何解决？

Answer 1

您可以将cssClass应用于输入。在您的代码中，

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

然后将css属性应用于scss文件中的此自定义类。

.customClass:focus {
   -css properties here-
}

Answer 2

alert.present();返回一个Promise。因此，我们只需添加以下几行即可实现预期的行为。

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

}）;

由于事实，那个querySelector（）;始终采用第一个结果，它将聚焦在显示的警报中找到的第一个输入元素。

如果要聚焦第二，第三等，则应将querySelector('ion-alert input');更改为querySelectorAll('ion-alert input')[1]，将1用作第二个输入元素的占位符。

在您的config.xml文件中，不要忘记添加此行

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

无法将重点放在提示警报输入上

2 个答案: