Stripe.js v3 元素需要双击才能聚焦（但仅限于 iPad/iPhone）

Question

我一直在使用 Bootstrap 4 beta 和 Stripe.js v3。如果您不熟悉 Stripe.js 的这个较新版本，它基本上是将 iframe 注入跨度，并使跨度就像表单输入一样。我不喜欢这个想法，但据说它比 Stripe.js (v2) 的旧版本更符合 PCI。

此处演示：https://codepen.io/skunkbad/pen/BdgYmY

将 HTML 减少到代表我的信用卡输入的内容如下所示：

<span id="card-number" class="form-control">
    <!-- iframe is injected here by Stripe.js -->
</span>

由于 Bootstrap 4 的 CSS 样式，此 span.form-控件显示 "flex"，我必须更改它，否则我不能看看我在字段中输入的内容。

#card-number.form-control {
    display:block;
}

这最终适用于我尝试过的所有浏览器：

Firefox 在 Ubuntu 16.04
Chrome 在 Ubuntu 16.04
Windows8.1
Chrome 在 Android N Phone
iPad
Safari 在 iPhone

但是在我尝试过的 IOS 设备上（iPad 和 iPhone），我必须双击该字段才能获得焦点并开始输入。 Stripe 网站上的 Stripe.js Elements 演示没有这个问题，所以我假设它与 Bootstrap 4 的 CSS.

有关

完整代码供您测试享受：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Stripe.js v3 with Bootstrap 4 (beta) Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <style>
    /* Blue outline on focus */
    .StripeElement--focus {
      border-color: #80BDFF;
    }
    /* Can't see what I type without this */
    #card-number.form-control,
    #card-cvc.form-control,
    #card-exp.form-control {
      display:block;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <h1 class="mt-5">Stripe.js v3 with Bootstrap 4 (beta) Test</h1>
    <div id="card-errors" role="alert"></div>
    <div class="card">
      <div class="card-body">
        <form id="payment-form">
          <div class="form-group">
            <label for="name">Name on Card</label>
            <div class="input-group">
              <span class="input-group-addon">A</span>
              <input type="text" class="form-control" id="name">
              <span class="input-group-addon">B</span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-number">Credit Card Number</label>
            <div class="input-group">
              <span class="input-group-addon">C</span>
              <span id="card-number" class="form-control">
                <!-- Stripe Card Element -->
              </span>
              <span class="input-group-addon">D</span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-cvc">CVC Number</label>
            <div class="input-group">
              <span class="input-group-addon">E</span>
              <span id="card-cvc" class="form-control">
                <!-- Stripe CVC Element -->
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-exp">Expiration</label>
            <div class="input-group">
              <span id="card-exp" class="form-control">
                <!-- Stripe Card Expiry Element -->
              </span>
              <span class="input-group-addon">F</span>
            </div>
          </div>
          <button id="payment-submit" class="btn btn-primary">Submit Payment</button>
        </form>
      </div>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
  $(document).ready(function(){

    // Create a Stripe client
    var stripe = Stripe('pk_test_A45s2laXHrCRj6Tow44dk67z');

    // Create an instance of Elements
    var elements = stripe.elements();

    // Try to match bootstrap 4 styling
    var style = {
      base: {
        'lineHeight': '1.35',
        'fontSize': '1.11rem',
        'color': '#495057',
        'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
      }
    };

    // Card number
    var card = elements.create('cardNumber', {
      'placeholder': '',
      'style': style
    });
    card.mount('#card-number');

    // CVC
    var cvc = elements.create('cardCvc', {
      'placeholder': '',
      'style': style
    });
    cvc.mount('#card-cvc');

    // Card number
    var exp = elements.create('cardExpiry', {
      'placeholder': '',
      'style': style
    });
    exp.mount('#card-exp');

    // Submit
    $('#payment-submit').on('click', function(e){
      e.preventDefault();
      var cardData = {
        'name': $('#name').val()
      };
      stripe.createToken(card, cardData).then(function(result) {
        console.log(result);
        if(result.error && result.error.message){
          alert(result.error.message);
        }else{
          alert(result.token.id);
        }
      });
    });

  });
</script>
</body>
</html>

改变 Stripe Elements 的样式和字体只能做这么多，但我再次认为问题来自 Bootstrap 4 的 CSS。我试过摆弄 span 的样式，但没有成功。

所以我的问题是，我可以对我的 CSS 做哪些具体更改，让 iPad 和 iPhone 用户像其他人一样只需单击一次？

Answer 1

好吧，我明白了，或者至少我认为我明白了。我刚刚将显示类型从块更改为内联块，IOS Safari 看起来更快乐。

#card-number.form-control {
    display:inline-block;
}

我不确定为什么 block 不起作用，因为它适用于我使用的所有其他设备......但它就是这样。

Stripe.js v3 元素需要双击才能聚焦（但仅限于 iPad/iPhone）

Stripe.js v3 elements requiring double tap to focus (but only on iPad/iPhone)

css

bootstrap-4

stripe.js