vue-virtual-keyboard

VueVirtualKeyboard

Use jQuery Virtual Keyboard in Vue

A on-screen keyboard (OSK) Component that works in the browser for vue. Useful for Kiosk Touchscreens.

Inspired by react-virtual-keyboard Based on the Virtual Keyboard using jQuery: https://mottie.github.io/Keyboard/ For more information, check out the API documentation: https://github.com/Mottie/Keyboard/wiki/Options

Installation

npm install --save vue-virtual-keyboard

Usage

Bundler (Webpack, Rollup)

<keyboard
          :options="keyboardOption"
          class="ui-keyboard-case"
          v-model="pym"
        ></keyboard>

import { Keyboard } from 'vue-virtual-keyboard';

    keyboardOption: {
        usePreview: false,
        stickyShift: false,
        autoAccept: true,
        language: 'zh',
        display: { // overwrite key display
          accept: '确认',
          bksp: '删除',
          cancel: '取消',
          enter: '回车',
        },
      },

  .ui-keyboard-case {
    font-size: 40px;
    text-align: center;
	  /* background: #fefefe; */
  	border: 1px solid #ffe3e2;
    padding: 4px;
    width: 38%;
    height: auto;
    margin-right: 5%;
    /* left: 25%; */
    /* top: auto;
    bottom: 0px; */
    /* position: fixed; */
    
  }

Browser

Example in jsfiddle

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-virtual-keyboard/dist/vue-virtual-keyboard.css"></link>
<script src="vue-virtual-keyboard/dist/vue-virtual-keyboard.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-virtual-keyboard/dist/vue-virtual-keyboard.css"></link>
<script src="https://unpkg.com/vue-virtual-keyboard"></script>

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT