Virtual Numeric Keypad Component For Vue

A Vue component created to enhance your user input with a virtual numeric keypad.

The virtual keypad is randomized by default for an added layer of security and usability and is highly customizable to cater to a wide range of user preferences and functionalities.

How to use it:

1. Import and register the VueNumericKeypad component.

import VueNumericKeypad from "vue-numeric-keypad";

export default {
  // ...
  components: {
    VueNumericKeypad,
  },
  // ...
};

2. Bind the Numeric Keypad to an input field.

<template>
  <div id="app">
    <input
      type="number"
      :value="value"
      @click.stop="show = true"
      readonly
    />
    <VueNumericKeypad
      :value.sync="value"
      :show.sync="show"
      :options="options"
    />
  </div>
</template>

export  default {
  name:  "App",
  components: {
    VueNumericKeypad,
  },
  data() {
    return {
      value:  "",
      show:  0,
      options: {
        keyRandomize:  true,
        randomizeClick:  true,
        fixDeleteKey:  false,
        fixBlankKey: false,
      },
    };
  },
  created() {
    document.addEventListener('click', function () {
      this.show = 0;
    }.bind(this));
  }
};

3. Available props and options.

id: {
  type: String,
  required: false,
},
value: {
  type: String,
  default: "",
  required: true,
},
show: {
  type: [Boolean, Number],
  default: false,
  required: true,
},
encryptFunc: {
  type: Function,
  default: c => c,
},
encryptedValue: {
  type: Array,
  default: () => [],
},
options: {
  type: Object,
  default: () => ({}),
  validator: function (value) {
    const keyArrayDisable = (value.keyArray || []).some(key => {
      switch (typeof key) {
        case 'number':
          return (!Number.isInteger(key) || key < -1 || key > 9);
        case 'string':
          return key;
        default:
          return false;
      }
    });
    if (keyArrayDisable) {
      console.error("KeyArray can contain only an integer 'number' between -1 and 9 and an empty 'string'.");
      return false;
    }
    const classDisable = Object.keys(value).some(key => /Class/.test(key) && /[^0-9A-z\-_ ]/.test(value[key]));
    if (classDisable) {
      console.error("Class name can contain only 'a-z' and 'A-Z', '0-9', '_', '-', ' '.");
      return false;
    }
    return true;
  },
  required: false,
},

Preview:

Changelog:

v1.2.6 (06/27/2023)

• Add option fixBlankKey and Change randomize Method

v1.2.5 (06/29/2023)

• Add clear button (-2)
• Use ‘pointer event’ instead ‘click event’ and ‘touch event’
• Separate the method when clicking the button

Download Details:

Author: Chae-Sumin

Live Demo: https://chae-sumin.github.io/vue-numeric-keypad/

Download Link: https://github.com/Chae-Sumin/vue-numeric-keypad/archive/refs/heads/master.zip

Official Website: https://github.com/Chae-Sumin/vue-numeric-keypad

Install & Download:

# NPM
$ npm i vue-numeric-keypad