Question

我正在构建一个需要用户输入PIN码的Web应用程序。我希望我的PIN码输入字段仅在手机/平板电脑上显示数字。我曾尝试使用type=number和type=tel，但它们都不带出正确的键盘。这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cash Express, LLC</title>

    <!-- CSS -->
    { $css }

  </head>
  <body>
    <div class="docusign-page-container">

      <div class="customer-portal-container">
        <h1 class="has-text-centered">
          Customer Portal
        </h1>
      </div>

      <div class="customer-pin-container">
        <h2 class="has-text-centered">
          Enter your PIN below
        </h2>

        <!-- A grouped collection of single number inputs -->
        <div id="grouped-inputs" class="customer-pin">
          <input type="number" maxlength="1" autocomplete="off" pattern="[0-9]*" inputmode="numeric" class="pin-digit first"/><input type="number" maxlength="1" autocomplete="off" pattern="[0-9]*" inputmode="numeric" class="pin-digit mid"/><input type="number" maxlength="1" autocomplete="off" pattern="[0-9]*" inputmode="numeric" class="pin-digit mid"/><input type="number" maxlength="1" autocomplete="off" pattern="[0-9]*" inputmode="numeric" class="pin-digit last"/>
        </div> <!-- Grouped inputs end -->

      </div>

      <!-- Error message container -->
      <div class="error-message-container has-text-centered">
        <p class="error-message"></p>
      </div> <!-- Error message container end -->

      <div class="submit-button-container">
        <button class="submit-button">
          Enter PIN
        </button>
      </div>

    </div>
  </body>

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  { $js }

</html>

有人知道如何解决这个问题吗？

输入type = tel和type = number在iPad Web应用程序上不起作用

0 个答案: