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 pressEnter
- 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