jQuery CodePicker

Description

A jquery-plugin to pick a code or some digits in a formular, usful for OTP, TAN..

Download bsms-code-picker.js

https://static.berlinsms.de/toolsforcoder/code-picker/dist/bsms-code-picker.min.js

Include jquery.js and bsms-code-picker.js in

-part of your page

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="bsms-code-picker.min.js"></script>

Find your jquery-container and assign code-picker

$('.plugin-container').bsmsCodePicker();

Make sure, the script is fully loaded, before you assign code-picker, e.g. use jquerys 'ready'

$(document).ready(function () {
    $('.plugin-container').bsmsCodePicker();
});

Add options, if needed:

$(document).ready(()=>{
    $('.plugin-container').bsmsCodePicker( { nrOfBoxes:4 } );
});

Example:

$(document).ready(function () {
    $('.plugin-container').bsmsCodePicker( { translate: {'I':'1','O':'0','l':'1'} } );
});

Option	DESCRIPTION	DEFAULT
nrOfBoxes	How many digits should be entered,	6
allowedChars	charset for each digit,	0123456789
inputName	name-attribute of a hidden input-tag, which the plugin includes to the form	bsms-code
translate	Dictionary of key/value pairs, where keys are strings or regexp to be replaced in the user input, and values are strings or functions to be replaced with	'\\w':c=>c.toUpperCase()
lastDigitEntered	callback-function, which was called, when the last digit was entered, could be intrpreted as user finished input and used for precheck or form-submit	null
showCredits	shows credits	true