Question

如果我需要添加更多详细信息，请告诉我...

如何通过stripe element输入实现以下效果？：

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

<div>
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
</div>

绝望的研究关于如何实现这一目标，我找不到任何东西。条纹不让你这样做吗？

我理解的方式是，条带化API将输入带入iFrame，并且无法使用JS对其进行修改。

相关的条码：

卡号请输入有效的信用卡

        <div class="str-element-wrapper">
            <div class="cvc-tooltip-trigger"></div>
            <div class="cvc-tooltip">
              <span style="font-weight: bold;">Where is your Security Code?</span>
              <span>Your credit card’s Security Code 
                  is a 3- or 4-digit number located 
                  on its front or back.</span>
            </div>
            <div id="card-cvc-element" class="field"></div>
            <label class="signup-form-input-label" for="name">CVC (Security Code)</label>
            <span class="signup-form-input__error">Please enter a valid CVC</span>
        </div>
        <div class="str-element-wrapper">
          <div id="card-expiry-element" class="field"></div>
          <label class="signup-form-input-label" for="name">Expiration (MM / YY)</label>
          <span class="signup-form-input__error">Please enter a valid expiration</span>
        </div>

JS：

// Create a Stripe client.
        var stripe = Stripe("(my stripe key here)");

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

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
          base: {
            color: "#32325d",
            fontFamily: '"Raleway", Raleway, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
              color: "#292c2e"
            }
          },
          invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
          }
        };

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

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

        var cardExpiryElement = elements.create('cardExpiry', {
          style: style,
          placeholder: '',
        });
        cardExpiryElement.mount('#card-expiry-element');

我尝试过：

$(".StripeElement").focus(function() {
        $(this).siblings().addClass("signup-form-input-label--focused")
    });
    $(".StripeElement").focusout(function() {
        if ($(this).val() !== "") {
            // keep state
        } else {
            $(this).siblings().removeClass("signup-form-input-label--focused");
        }
    });

然后添加CSS：

.signup-form-input-label--focused {
        @media (max-width: $mobile-bp) {
            left: 4%;
        }
        top: 20%;
        left: 11%;
        font-size: 12px;
        color: #6d7474;
    }

将标签缩小。

但是所有这些都是一个迷失的原因（我认为是idk），因为输入是通过iFrame拉入的。

我可以这样做还是不可以？

条纹元素-在输入中添加占位符效果

0 个答案: