jb-pin-input

pin input web component

Usage no npm install needed!

<script type="module">
  import jbPinInput from 'https://cdn.skypack.dev/jb-pin-input';
</script>

README

jb-pin-input

pure js standalone pin input web-component

  • smart paste algorithm
  • mobile freindly
  • light and fast

sample:https://codepen.io/javadbat/pen/zYPEqNJ

doc

usage

load javascript code

you can load this web component with 2 method:

1- using npm: if you have modern app with module mechanism and npm you can install and import module from npm:

npm i jb-pin-input

in your js file:

import 'jb-pin-input';

2- using cdn:

<script src="https://unpkg.com/jb-pin-input"></script>

in HTML view

<jb-pin-input></jb-pin-input>

set value

to select value in your code you have 2 option: 1- set it via dom assign pinInputDom.value = yourValue 2- set through dom attribute <jb-pin-input value="yourValueSting"></jb-pin-input> remember set value as attribute if your option is a plain string but in direct assign like first option you can attach both string or object value assignation

events


    dropDownElement.addEventListener('load',(e)=>{/*your function*/});
    dropDownElement.addEventListener('init',(e)=>{/*your function*/});
    dropDownElement.addEventListener('change',(e)=>{/*your function*/});
    dropDownElement.addEventListener('keyup',(e)=>{/*your function*/});
    //on user press enter
    dropDownElement.addEventListener('enter',(e)=>{/*your function*/});

set custome style

in some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component | css variable name | description | | ------------- | ------------- | | --jb-pin-input-bottom-line-color | color of bottom line of each number | | --jb-pin-input-bottom-line-color-active | color of bottom line of each number when user focus on it | | --jb-pin-input-pin-color | color of inputed text |