Ionic 和 Stripe Elements: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 应用程序中使用了它.目前，它运行良好，除了我发现了一个非常烦人的错误，仅在 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

这通常不是问题.但是，如果我按后退"按钮，我会转到上一页，但键盘会停留！即使我关闭键盘，只要我进入新页面，它也会永远重新打开，或者如果我打开菜单……我的 UI 坏了.

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.

这篇关于Ionic 和 Stripe Elements:iOS 的键盘错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！