Simple Vue OTP Style Input

Only support Vue.js 2.2.x+

Any polyfill error (missing functions...etc) can be fixed by import polyfill lib or config polyfill for webpack & babel. I removed all polyfill due to this recommend

Working demo

Installation

Global:

1// main
2import Vue from 'vue';
3import OTPInput from '@8bu/vue-otp-input';
4Vue.use(OTPInput);
5

---

Component:

1<script>
2import OTPInput from '@8bu/vue-otp-input';
3import '@8bu/vue-otp-input/';
4module.export = {
5  name: 'you-component',
6  components: {
7    'otp-input': OTPInput,
8  }
9}
10</script>
11

Usage

1<template>
2  <otp-input
3    v-model="userToken"
4    class="field-container"
5    :length="6"
6    pattern="[^0-9]+"
7    :ignorePattern="false"
8    fieldClass="custom-field-class"
9    :size="32"
10    @valid="isTokenComplete"
11    disabled={false}
12  />
13</template>

Properties

v-model is supported by default.

Prop	Type	Required	Default	Description
class	string	❌	❌	Outer class container
length	number/string	✔️	4	Number of expected characters
pattern	string	❌	[^0-9]+	Regex pattern of individual character input
ignorePattern	boolean	❌	false	Turn off character validation
fieldClass	string	❌	❌	Custom class for each input character
size	number/string	❌	16	Font size of input character (input size = 1.75 x font size).
disabled	boolean	❌	false	Working like native disabled
password	boolean	❌	false	Change all input type to password

Events

Name	Param: Type	Description
change	value: string	Return string result of user input
valid	isValid: boolean	Validate whenever user input to see if the input have been fully filled.

Limitation

Mobile devices may not have paste & backscape/delete feature. I'm working on another approach for this issue.

Change logs

From v1.2.0+, I will note some simple change log to keep track my changes.

1.2.1

---

• Add submit event when user press Enter
• Focus is now select a whole input field

1.2.0

---

• Fix mobile input issue
• Update new prop password for changing input type to password

Contributions are welcome!

If you want to contribute to this please read the Contribution guidelines

---