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