sinchar

singleDigitInput

Small utility to controll single char input field. Works well on desktop and mobile devices.

Supports paste event with Ctrl+C. After paste event fired, the callback function executes.

Visually it looks something like this. After filling up all the inputs a callback function executes.

Run npm i sinchar to install as npm package.

OR

Embed it via script tag

<script src="https://unpkg.com/sinchar@latest/dist/index.js"></script>

Usage

Imagine structure like this:

<div class="inputs-div">
  <input class="my-input" maxlength="1">
  <input class="my-input" maxlength="1">
  <input class="my-input" maxlength="1">
  <input class="my-input" maxlength="1">
  <input class="my-input" maxlength="1">
  <input class="my-input" maxlength="1">
  <input type="hidden" id="final-value">
</div>

It has 6 inputs for typing in 1 digit per input. For exapmle it can be authorization sms code.

Create instance and pass options object. After instance is created, run .processCodeInput(callback) method. This will initialize all the keyboard events. Please notice, that you have to pass the final value argument to the callback result as shown in example below.

const options = {
  selector: '.inputs-div > .my-input',
  hiddenInputId: 'final-value',
  fillRecievedValue: true
}
const sch = new SinChar(options);
sch.processCodeInput((res) => {
  // res is the final value
  // Here is your code...
});

Options:

Option	Type	Required	Description
selector	string	yes	CSS selector to pick all inputs. It is a querySelectorAll underhood.
hiddenInputId	string	yes	ID attribute of a hidden input. This input stores all the digits we entered.
fillRecievedValue	boolean	yes	If true, inputs will be filled in case hiddenInput input value is not empty.
filledClass	string	no	Name of a class to decorate filled input. This is optional parameter.
numbersOnly	boolean	no	If true only numbers allowed. Default is false.
autofocus	boolean	no	If true first input will be fucused automatically. Default is false.