Home Angular Custom Virtual Numeric Keyboard In Mobile Browsers

Custom Virtual Numeric Keyboard In Mobile Browsers

Angular webcodeflow · July 10, 2022 · Comments off

A custom virtual numeric keyboard works in mobile browsers. It has a virtual input box that invokes the numeric keypad instead of the system keyboard, the virtual input box supports many of the standard html5 properties and also has a nice handle to make it behave as a native input element as possible. Besides, the numeric keypad is a pluggable component that can be used with other input interfaces.

The Numeric keyboard was built respectively for Vanilla JavaScript, React, Angular, and Vue.

vue numeric keyboard, numeric keyboard android, javascript numeric keyboard, vue keyboard, vue touch keyboard, html numeric keypad example

How to make use of it:

Install:

yarn add numeric-keyboard

1. Config Webpack to use the right version.

resolve: {
  alias: {
    // use Vue component for example
    'numeric-keyboard$': 'numeric-keyboard/dist/numeric_keyboard.vue.js'
  }
},

2. Usage

import { NumericInput } from 'numeric-keyboard'
new NumericInput({
  type: 'number',
  placeholder: 'touch to input',
  onInput(value) {
    ...
  }
}).mount('.input')

mobile numeric keyboard for vue js, numeric keyboard Plugin/Github