离子和条纹元素：iOS的键盘错误 [英] Ionic and Stripe Elements: keyboard bug with iOS

问题描述

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

Stripe introduced a way to collect credit cards information named Stripe Elements. Roughly speaking, it consists on letting Stripe propose an UI for collecting credit cards.

我在Ionic3 / Angular4应用程序中使用它。
现在，它完美无缺，除了我发现一个非常讨厌的bug，仅在iOS中：
当关注信用卡号码时，会出现一个键盘（似乎是本机键盘），然后它被替换通过离子一个0.5秒后，如这2个iPhone截图所示：

I used it in an Ionic3/Angular4 application. For now, it works perfectly, except I found a very annoying bug, in iOS only: When focusing the credit card number, a keyboard appears (seems to be the native one), then it is replaced by the ionic one 0,5 second after, as showed on these 2 iPhone screenshots:

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


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

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

这通常不会成为问题。
但是，如果我按下后退按钮，我会转到上一页，但键盘会停留！即使我关闭键盘，它会在我进入新页面后立即重新打开，或者如果我打开菜单......我的用户界面已经坏了。

That would not be a problem usually. But then, if I press "back" button, I go to the previous page but the keyboard stays! Even if I close the keyboard, it will reopen forever as soon as I go to a new page, or if I open the menu… my UI is broken.

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

I have the intuition there is a conflict between the ionic keyboard triggered on any input, and the native keyboard triggered by Stripe code. But due to the nature of stripe Elements, I can’t control the content of the form, I only have pretty much this in the html code:

<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不要触发键盘吗？

Any idea how to try to debug this? Do you think I could tell to Ionic not to trigger the keyboard?

非常感谢。
注意：我正在使用ionic-angular 3.7.1

Thanks a lot. Notes : I’m using ionic-angular 3.7.1

推荐答案

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

I have the same issue as well. I fixed it by inserting an invisible input node. Once purchase / next button is pressed, or anytime you decide to hide the keyboard, focus on that invisible input and then blur.

<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也是如此。

Any approach to get the DOM node shall be fine, even for pure Javascript.

请注意，输入不应为display：none;或visibility：hidden;，否则iOS Safari将不会关注它。

Note that the input shall not be "display: none;", or "visibility: hidden;", otherwise iOS Safari won't focus on it.

使用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();
  }

更新

以下方法可能更好：

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

获取iframe并模糊。

Get the iframe and blur.

这篇关于离子和条纹元素：iOS的键盘错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！