Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@8bu/vue-otp-input
Advanced tools
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
// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);
<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
name: 'you-component',
components: {
'otp-input': OTPInput,
}
}
</script>
<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>
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 |
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. |
Mobile devices may not have paste & backscape/delete feature. I'm working on another approach for this issue.
From v1.2.0+, I will note some simple change log to keep track my changes.
submit
event when user press Enter
password
for changing input type to passwordIf you want to contribute to this please read the Contribution guidelines
FAQs
Simple & Flexible OTP Style Input
We found that @8bu/vue-otp-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.