时间戳

首页 > 解决方案 > 无法将重点放在提示警报输入上

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

问题描述

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

我能做些什么来解决这个问题？

标签： angularionic-frameworkionic3

解决方案

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

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

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

.customClass:focus {
   -css properties here-
}

推荐阅读