Package Exports

codein

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (codein) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Codein

Tokenized code input

Install

With Bower

bower install codein

With NPM

npm install codein

Example Setup

Javascript

import Codein from 'codein';

// create an instance (with the defaults)
const codein = new Codein({
  el: document.querySelector('.codein-input'),
  mask: document.querySelector('.codein-input-mask'),
  maskChar: 0,
  alphaNum: false,
  max: 6,
  digitClass: 'digit',
  enter: codein => {},
  update: codein => {},
});

Methods

codein.lock(); // lock the input
codein.unlock(); // unlock the input
codein.focus(); // focus the input
codein.value; // get the value
codein.value = '12123'; // set the value
codein.reset(); // reset the input
codein.destroy(); // destroy the codein

HTML

<div class="codein-input-wrapper">
  <div class="codein-input"></div>
  <div class="codein-input-mask"></div>
</div>

CSS

.codein-input-wrapper {
  font-family: monospace;
  width: 100%;
  max-width: 40rem;
  position: relative
}

.codein-input-wrapper .codein-input {
  border: 1px solid #ddd;
  position: relative;
  z-index: 10;
}

.codein-input-wrapper .codein-input:empty {
  padding-left: calc((100% / 6 / 2) - 0.35rem);
}

.codein-input-wrapper .codein-input,
.codein-input-wrapper .codein-input-mask {
  font-size: 1rem;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
}

.codein-input-wrapper .codein-input-mask {
  color: #ccc;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.codein-input-wrapper .digit {
  display: inline-block;
  pointer-events: none;
  text-align: center;
  width: calc(100% / 6);
  height: 100%;
}

License

MIT License