https://github.com/icebob/vue-touch-keyboard
Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
https://github.com/icebob/vue-touch-keyboard
keyboard keyboard-layout touch virtual-keyboard vue
Last synced: 24 days ago
JSON representation
Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
- Host: GitHub
- URL: https://github.com/icebob/vue-touch-keyboard
- Owner: icebob
- License: mit
- Created: 2016-10-21T14:46:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-08-02T09:41:27.000Z (almost 3 years ago)
- Last Synced: 2025-04-12T23:38:37.406Z (24 days ago)
- Topics: keyboard, keyboard-layout, touch, virtual-keyboard, vue
- Language: Vue
- Homepage:
- Size: 320 KB
- Stars: 299
- Watchers: 16
- Forks: 114
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - vue-touch-keyboard - VueJS虚拟键盘组件 (UI组件)
- awesome-github-vue - vue-touch-keyboard - VueJS虚拟键盘组件 (UI组件)
- awesome - vue-touch-keyboard - VueJS虚拟键盘组件 (UI组件)
- awesome-vue - vue-touch-keyboard - touch-keyboard?style=social) - VueJS虚拟键盘组件 (UI组件)
README
# vue-touch-keyboard [](https://www.npmjs.com/package/vue-touch-keyboard) 
Virtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Display
[](https://www.codacy.com/app/mereg-norbert/vue-touch-keyboard?utm_source=github.com&utm_medium=referral&utm_content=icebob/vue-touch-keyboard&utm_campaign=Badge_Grade)
[](https://travis-ci.org/icebob/vue-touch-keyboard)
[](https://coveralls.io/github/icebob/vue-touch-keyboard?branch=master)
[]()
[](https://david-dm.org/icebob/vue-touch-keyboard)
[](https://david-dm.org/icebob/vue-touch-keyboard#info=devDependencies)
[](https://www.npmjs.com/package/vue-touch-keyboard)
**If you like my work, please [donate](https://www.paypal.me/meregnorbert). Thank you!**
## Demo
[JSFiddle demo](https://jsfiddle.net/icebob/88n7c1L8/)
[Codepen demo](https://codepen.io/alvidr/pen/JBEmdR/)
[]()
## Features
- 3 built-in layouts, but you can create custom layouts
- **no external dependencies**
- full responsive
- customizable styles
- ...etc
## Installation
### NPM
You can install it via [NPM](http://npmjs.org/).
```
$ npm install vue-touch-keyboard
```
### Manual
Download zip package and unpack and add the `vue-touch-keyboard.css` and `vue-touch-keyboard.js` file to your project from dist folder.
```
https://github.com/icebob/vue-touch-keyboard/archive/master.zip
```
## Usage
```html
import VueTouchKeyboard from "vue-touch-keyboard";
import style from "vue-touch-keyboard/dist/vue-touch-keyboard.css"; // load default style
Vue.use(VueTouchKeyboard);
export default {
data: {
visible: false,
layout: "normal",
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
}
},
methods: {
accept(text) {
alert("Input text: " + text);
this.hide();
},
show(e) {
this.input = e.target;
this.layout = e.target.dataset.layout;
if (!this.visible)
this.visible = true
},
hide() {
this.visible = false;
}
}
}
```
## Properties
Property | Default | Accepted values | Description
------------- | -------- | --------------- | -----------
`input` | required | `HTMLInputElement` | The target input HTML element
`layout` | required | `String` or `Object` | Layout of keys. If you are using the built-in layouts, you can set as the name of the layout. If you want to use custom layout, you need to set a layout `Object`.
`accept` | `null` | `Function` | Event handler. Fired when the "Accept/Close" button pressed.
`cancel` | `null` | `Function` | Event handler. Fired when the "Cancel" button pressed.
`change` | `null` | `Function` | Event handler. Fired when the input value changed.
`next` | `null` | `Function` | Event handler. Fired when the "Next" button pressed or the length of the value of the input reached the `maxLength` of the `input`
`options` | `{}` | `Object` | Functional options.
`defaultKeySet`| `default` | `String` | Default key set. You can choose a desired key set of your layout to be used when a keyboard is initialized.
## Options
Option | Default | Accepted values | Description
----------- | -------- | --------------- | -----------
`useKbEvents` | `false` | `boolean` | If true, the component will generate a `keydown` event and trigger it. If it returns with `false`, it won't insert the new character.
`preventClickEvent` | `false` | `boolean` | If true, the component will `preventDefault` the click event.
## Built-in layouts
* `normal` - Normal full layout. Similar as real keyboard layouts
* `numeric` - Only for numbers
* `compact` - Compact layout. Similar as mobile phone keyboard layouts
## Development
This command will start a `webpack-dev-server` with content of `dev` folder.
```bash
npm run dev
```
## Build
This command will build a distributable version in the `dist` directory.
```bash
npm run build
```
## Test
```bash
npm test
```
## Contribution
Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.
## License
vue-touch-keyboard is available under the [MIT license](https://tldrlegal.com/license/mit-license).
## Contact
Copyright (C) 2016 Icebob
[](https://github.com/icebob) [](https://twitter.com/Icebobcsi)