離子和條紋元素：與iOS的鍵盤錯誤

條紋引入了一種方法來收集名爲條紋元素的信用卡信息。粗略地說，它包含讓Stripe提出一個用於收集信用卡的UI。離子和條紋元素：與iOS的鍵盤錯誤

我在Ionic3/Angular4應用程序中使用它。現在，它完美的工作，除了我發現一個非常惱人的錯誤，僅在iOS：當集中信用卡號碼，出現一個鍵盤（似乎是本地的），然後它被離子1代替， 5秒後，作爲顯示對這些2個iPhone截圖：

這將不會是一個問題通常。但是，如果我按下「返回」按鈕，我會轉到上一頁，但鍵盤保持不變！即使我關閉了鍵盤，只要我進入新頁面，或者如果我打開菜單，我的UI就會被破壞。

我有直覺，在任何輸入觸發的離子鍵盤和由條紋代碼觸發的本地鍵盤之間存在衝突。但由於條紋元素的性質，我無法控制表單的內容，我只有非常這的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

來源

2017-10-05 David D.

我也有同樣的問題。我通過插入一個不可見的輸入節點來修復它。一旦購買/下一個按鈕被按下，或任何時候您決定隱藏鍵盤，請關注該不可見輸入，然後模糊。

<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和模糊。

來源

2017-10-13 00:21:22 Tianqi

優秀！謝謝，這真的有幫助。 –

嗨，我有一個其他的錯誤。當卡號完成並且焦點轉到輸入日期時，鍵盤關閉。 –

你甚至在Ionic中如何實現這一點？你如何排除條紋JS文件？ – jamesmpw

我已經向Stripe報告過這個問題，他們已經承認存在一個問題並且正在研究中，所以希望很快會有一個解決方案。

來源

2018-02-22 08:09:44 dottodot

謝謝。我實際上是從一開始就對Stripe的支持，他們幫助找到解決方法。 –

好吧像條紋聲音不會很快解決這個問題，並建議相同的方法，然後模糊。這是他們對完整性的迴應。

由於PCI原因，我們的字段被託管在iframes中，並且自上次版本以來，移動Safari瀏覽器的處理方式相當糟糕，它如何處理隱藏的iframe。我們可以實施這些潛在的修復方案，但從長遠來看它們可能會引入更多問題，因此我們仍在尋找更好的解決方案。

希望在這裏有一個解決方法，它應該相當簡單。問題出在事實上，Safari忽略.blur（），如果iframe未聚焦，則導致鍵盤保持打開狀態。你可以做什麼是手動調用.focus（）和.blur（）方法，其中將重置狀態。

更新

而且我發現，沒有任何的建議，工作和鍵盤將保持開放。你真正需要做的是使用Stripe自己的焦點和模糊方法，

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

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

我不得不在我的角度應用程序中添加setTimeout，因爲沒有它，模糊似乎不起作用。

來源

2018-02-26 17:47:58 dottodot

離子和條紋元素：與iOS的鍵盤錯誤

回答

相關問題