@berlinsms/code-picker
Version:
A jquery-plugin to pick a code or some digits in a formular, usful for OTP, TAN..
78 lines (73 loc) • 2.51 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Picker Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../dist/bsms-code-picker.min.js"></script>
<style>
body,h3 {
font-family:arial
}
input[type="text"].bsms-code-digit-3::after,
input[type="text"].bsms-code-digit-7::after,
input[type="text"].bsms-code-digit-11::after,
input[type="text"].bsms-code-digit-15::after {
content: '🔗';
}
input[type="text"].bsms-code-digit {
border-left-width: 0;
border-right-width: 0;
margin: 0;
border-radius: 0;
}
input[type="text"].bsms-code-digit-0,
input[type="text"].bsms-code-digit-4,
input[type="text"].bsms-code-digit-8,
input[type="text"].bsms-code-digit-12 {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
input[type="text"].bsms-code-digit-3,
input[type="text"].bsms-code-digit-7,
input[type="text"].bsms-code-digit-11,
input[type="text"].bsms-code-digit-15 {
border-right-width: 1px;
border-radius: 0 5px 5px 0;
margin-right: 10px;
}
input[type="text"].bsms-code-digit:focus {
border: 0;
box-shadow: inset 0 0 0 .125rem #1040c1,0 0 0 .375rem rgba(16,114,235,.16);
border-radius: 5px;
z-index: 1;
position: relative
}
</style>
</head>
<body>
<form id="licence-code">
<h3>Lizenzcode-Example: 16 Digits, allows numbers and letters</h3>
<div class="code-picker-container"></div>
<br>
<input type="submit">
</form>
<script>
$(() => {
// Apply code-picker to the container
$('.code-picker-container').bsmsCodePicker({
nrOfBoxes: 16,
allowedChars: '0123456789ABCDEFGHIJKLMONPQRSTUVWXYZ',
inputName: 'code',
lastDigitEntered: lastDigitEntered,
showCredits:false
});
});
function lastDigitEntered(code) {
alert(`lastDigitEntered: code=${code}`);
$('#licence-code').submit();
}
</script>
</body>
</html>