sinchar v0.7.0

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: