离子和条纹元素:iOS的键盘错误

Question

Stripe介绍了一种收集名为Stripe Elements的信用卡信息的方法.粗略地说,它包括让Stripe建议用于收集信用卡的UI.

我在Ionic3/Angular4应用程序中使用它.现在,除了我发现一个非常讨厌的bug之外,它只能在iOS中运行完美:当关注信用卡号码时,会出现一个键盘(似乎是原生的键盘),然后它会被离子键盘取代0.5秒之后,正如这两部iPhone截图所示:

• https://i.stack.imgur.com/qO5YB.png
• https://i.stack.imgur.com/p23Y7.png

这通常不会成为问题.但是,如果我按"后退"按钮,我会转到上一页,但键盘会停留!即使我关闭键盘,一旦我进入新页面,或者如果我打开菜单,它将永远重新打开...我的用户界面被打破了.

我有直觉,在任何输入上触发的离子键盘与Stripe代码触发的本机键盘之间存在冲突.但是由于条纹元素的性质,我无法控制表单的内容,我在html代码中只有这个:

<form action="/charge" method="post" id="payment-form">
      <div class="form-row">
          <div id="card-element">
            <!-- a Stripe Element will be inserted here. -->
          </div>

      ....
</form>

知道如何尝试调试这个吗？你认为我可以告诉Ionic不要触发键盘吗？

非常感谢.注意:我正在使用离子角度3.7.1

Answer 1

我也有同样的问题.我通过插入一个不可见的输入节点来修复它.按下购买/下一个按钮后,或者在您决定隐藏键盘的任何时候,专注于该隐形输入然后模糊.

<input id="inviInput" type="tel" style="border: 0px; color: transparent; width: 0px; height: 0px; background: transparent;">

var inviInput = $('#inviInput')[0];
inviInput.focus();
inviInput.blur();

获取DOM节点的任何方法都应该没问题,即使对于纯Javascript也是如此.

请注意,输入不应为"display:none;"或"visibility:hidden;",否则iOS Safari将不会关注它.

编辑Ionic3/Angular4的特定解决方案:

<input #invisiInput
           id="invisiInput"
           type="tel"
           style="border: 0; color: transparent; width: 0; height: 0; background: transparent;">

-

@ViewChild('invisiInput') invisiInput: ElementRef;

...

  ionViewWillLeave() {
    this.invisiInput.nativeElement.focus();
    this.invisiInput.nativeElement.blur();
  }

UPDATE

以下方法可能更好:

$('.card_input iframe')[0].focus()
$('.card_input iframe')[0].blur()

获取iframe并模糊.