Socket
Socket
Sign inDemoInstall

@8bu/vue-otp-input

Package Overview
Dependencies
28
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @8bu/vue-otp-input

Simple & Flexible OTP Style Input


Version published
Weekly downloads
278
decreased by-2.46%
Maintainers
1
Install size
6.56 MB
Created
Weekly downloads
 

Readme

Source

Simple Vue OTP Style Input

GitHub Release GitHub Activity License BuyMeCoffee

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

alt text

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.

PropTypeRequiredDefaultDescription
classstringOuter class container
lengthnumber/string✔️4Number of expected characters
patternstring[^0-9]+Regex pattern of individual character input
ignorePatternbooleanfalseTurn off character validation
fieldClassstringCustom class for each input character
sizenumber/string16Font size of input character (input size = 1.75 x font size).
disabledbooleanfalseWorking like native disabled
passwordbooleanfalseChange all input type to password

Events

NameParam: TypeDescription
changevalue: stringReturn string result of user input
validisValid: booleanValidate 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


Keywords

FAQs

Last updated on 17 Jun 2020

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc