离子和条纹元素：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并模糊。

Answer 2

好吧声音像条纹不会很快解决这个问题，并建议使用相同的焦点方法然后模糊。 这是他们对完整性的回应。

出于PCI的原因，我们的字段托管在iframe中，移动版Safari自上一版本以来处理隐藏的iframe一直非常糟糕。 我们可以在这里实施潜在的修复，但从长远来看它们可能会引入更多问题，所以我们仍然在寻找更好的解决方案。

希望这里有一个解决方法，它应该相当简单。 问题来自于Safari忽略了.blur（），如果iframe没有聚焦，那么键盘会保持打开状态。 你可以做的是手动调用.focus（）和.blur（）方法，这将重置状态。

更新

此外，我发现没有任何建议有效，键盘将保持打开状态。 你真正需要做的是使用Stripe自己的焦点和模糊方法，即;

const card = elements.create('card');

card.focus();
setTimeout(() => {
  card.blur();
});

我不得不在我的角应用程序中添加setTimeout，因为没有它，模糊似乎不起作用。

Answer 3

我已经向Stripe报告了这个问题，他们已经承认存在问题并且正在调查中，所以希望很快就能解决。