Я создаю веб-приложение, которому нужен пользователь для ввода PIN-кода.Я хочу, чтобы в моих полях ввода 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>
Кто-нибудь знает, как решить эту проблему?