イオンとストライプの要素：iOSのキーボードのバグ

Question

ストライプは、ストライプ要素と呼ばれるクレジットカード情報を収集する方法を導入しました。 おおまかに言えば、Stripeがクレジットカードを収集するためのUIを提案することです。

Ionic3/Angular4アプリケーションで使用しました。 今のところ、iOSのみで非常に厄介なバグが見つかった以外は完璧に動作します： クレジットカード番号に焦点を合わせるとキーボードが現れます（ネイティブのものと思われます） 5秒後に、これら2つのiPhoneのスクリーンショットに示されたとおり、通常は問題ではないであろう

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

。 しかし、「戻る」ボタンを押すと、前のページに行きますが、キーボードはそのままです！キーボードを閉じても、新しいページに行くとすぐに、またはメニューを開くと、UIが壊れてしまいます。

私は、入力にトリガされたイオンキーボードと、ストライプコードによってトリガされたネイティブキーボードとの間に矛盾があります。

<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> 

任意のアイデアどのようにこれをデバッグしようとする： しかし、原因ストライプエレメントの性質のために、私は私が唯一かなりこのhtmlコードでいる、フォームの内容を制御することはできませんか？ キーボードをトリガーしないように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(); 

純粋なJavascriptの場合でも、DOMノードを取得する方法は問題ありません。

入力は「display：none;」または「visibility：hidden;」にしないでください。それ以外の場合は、iOS Safariはそれに集中しません。 Ionic3/Angular4のための具体的な解決策と

EDIT：

<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

私はこの問題をStripeに報告しました。彼らは問題があると認識しており、調査中です。すぐに修正がすぐにあります。

Answer 3

ストライプのようなサウンドはすぐにこれを修正するつもりはなく、フォーカスの同じ方法を提案してからぼかします。完全性のための彼らの応答はここにあります。

私たちのフィールドはiframeでホストされていますが、モバイルSafariは隠しiframeをどのように扱うのかという前バージョンからかなり悪いものでした。潜在的な修正がありますが、長期的にはより多くの問題が導入される可能性があるため、より良い解決策を模索しています。

ここには回避策があり、それはかなり簡単であるはずです。 iframeに焦点が合わずにキーボードが開いたままになると、Safariは.blur（）を無視してしまうという問題が原因です。 あなたができることは、 が状態をリセットする.focus（）と.blur（）メソッドを手動で呼び出すことです。

アップデートはまた、私は提案のどれも働いていないとキーボードが開いたままであろうことがわかりました。実際に行う必要があるのは、ストライプ自身のフォーカスとブラーの方法を使用することです。

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

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

角度アプリにsetTimeoutを追加しなければ、ぼかしは機能していないようです。