@8bu/vue-otp-input

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:

// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);

Component:

<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
  name: 'you-component',
  components: {
    'otp-input': OTPInput,
  }
}
</script>

Usage

<template>
  <otp-input
    v-model="userToken"
    class="field-container"
    :length="6"
    pattern="[^0-9]+"
    :ignorePattern="false"
    fieldClass="custom-field-class"
    :size="32"
    @valid="isTokenComplete"
    disabled={false}
  />
</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