icebob / vue-touch-keyboard

Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display

vue-touch-keyboard

Virtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Display

If you like my work, please donate. Thank you!

Demo

JSFiddle demo Codepen demo

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.

$ 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

<template>
  <div>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
    <vue-touch-keyboard :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
  </div>
</template>

<script>
  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;
        }
    }
  }
</script>

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.

npm run dev

Build

This command will build a distributable version in the dist directory.

npm run build

Test

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.

Contact

Copyright (C) 2016 Icebob

vue-touch-keyboard's Issues

How to enter Chinese

Eslint vue/no-mutations-props

Hi all,

I ran into some issues with the eslint vue rules, particularly vue/no-mutations-props:

Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting this.myProp = 'someOtherValue' in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten.

The issue are in clickKey and setFocusToInput methods:
this.input.value = text (line 266)
this.input.selectionStart = caret.start (286)
this.input.selectionEnd = caret.end (line 287)

The workaround I made is the following:

I created an event listener on the parent component:

<vue-touch-keyboard  <props> v-on:update-form="keyboardUpdate" />

---- in component methods
    keyboardUpdate (d) {
      this.keyboard.input[d.key] = d.value
    }

In keyboard.vue, I replaced the above mentioned lines by:
this.input.value = text => this.$emit('update-form', { key: 'value', value: text })

this.input.selectionStart = caret.start => this.$emit('update-form', { key: 'selectionStart', value: caret.start })

this.input.selectionEnd = caret.end => this.$emit('update-form', { key: 'selectionEnd', value: caret.end })

Hope it serves other people!

how to hide the next button and the close button

Why just only HTMLInputElement for input?

Why not also HTMLTextAreaElement?

add screenshot

Issue adding decimal numbers

I have a keyboard with the numeric layout. When I click “5” and then the decimal point, it clears the value and I get this message in the console:

The specified value "5." is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I’ve tried finding that error message in the codebase but can’t see where it or the pattern is defined.

Therefore, could this library be updated so selecting a decimal point doesn’t trash the value and instead lets me go on to specify the number after the decimal point?

useKbEvents doesn't trigger v-model update

I have set the options.useKbEvents to true and I hoped that this will trigger an update of the data property I used in v-model with the input field.
I see that the keypress event is dispatched but the data property doesn't update.
Do you know why?
Is there a workaround to achieve an automatic update of the data property?

Thanks for your help!

How to style on keypress

Hi,

I was wondering how or If I can edit the input on keydown or keypress?
In the working jsfiddle https://jsfiddle.net/icebob/88n7c1L8/ when a user presses on a key, the input box loses focus. I would like to keep focus and have the focus style applied when I press on any key. Is there any way I can do this?

@touchstart event ?

Hi, I'm using your (very helpful) plugin with a true kiosk machine that has no real keyboard input. It works really well, however we noticed that some elderly customers long-press on screen and as the whole plugin is based on click events, they feel the screen as unresponsive (they should leave the finger to see the input changed). It's a subtle feeling but it's there, and I wonder if a touchstart event could be better suited for this kind of interaction.

Your thoughts ?

Run custom function on click?

I would like to know if there is an alternative to trigger a custom function in Vue on click?
As an example I'd like to change the width of the keyboard as I toggle between the numeric and the default keys.

Do the characters have no accents?

They are not available?

Alternative layouts

https://www.quora.com/What-is-the-best-keyboard-layout-for-the-fastest-typing-speed
http://mentalfloss.com/article/52483/6-non-qwerty-keyboard-layouts

Option to debounce events?

A lot of accidental double-presses are registering on my capacitive touch screen. Is there a simple way to debounce events? So a minimum of say, 175ms is required between registering key presses?

Cannot see the input box while typing

Problem

When the keyboard pop ups, the bottom content are obviously get covered by the keyboard. There is no problem using it if the input field is on the top of the screen. The problem is when the input field is at the bottom of the page. I have no idea what I am typing.

Solution

Add an input field at the top of the keyboard. There should also be a label of the name of the field. So I dont forget what field I'm currently typing. I guess you can easily calculate if the input field will be covered by the keyboard.

Multi-language support

Is it possible to add multi-language support?

Not working with Typescript-Vue

When using your code in the Typescript version of vue i get following error:

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueTouchKeyboard> [...]

also, there are no typings for use with TS

Backspace delete selection

When we select a range of characters in input, and hit backspace, it ignores selection and deletes only one character.

Backspace should delete selected range of characters, as hardware keyboard does.

How can prevent event bubble to trigger android's keyboard

as title , When I assign foucs or click event to input , but It will trigger andorid's keyboard . How can I prevent it.

Inserting over selection

Inserting character over selection should behave as hardware keyboard does, replacing selection with pressed character.

Currently, inserting character over selection just inserts character on the beginign of selection.

I have created PR that expands this behavior. #38

When will the Vue v2.x be supported?

Hello,

Looks very nice keybord for vue, while I am using vuejs 2.0 in production, is there any plan for supportting v2.0?

Thanks!

Add a "gap" capability

I want to keep the layout of the keyboard to match a real one, but I want some areas to leave gaps. Something like

rowgap1: { width: 10 }

where a key is not created

Can't set alternative layout

<template>
  <div>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
    <vue-touch-keyboard v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
  </div>
</template>

<script>

  import layoutRu from "@/components/parts/keyboard-layout-ru"; // load default style

  export default {
    name: 'keyboard',
    data () {
      return {
        visible: false,
        layout: layoutRu,
        input: null,
        options: {
          useKbEvents: false
        }
      }
    }
.....
  }
</script>

keyboard-layout-ru.js

module.exports = {

	"normal": {

		_meta: {
			"tab": { key: "\t", text: "Tab", width: 60, classes: "control"},
			"shiftl": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
			"shiftr": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
			"caps": { keySet: "capsed", text: "Caps lock", width: 80, classes: "control"},
			"space": { key: " ", text: "Space", width: 180},
			"enter": { key: "\r\n", text: "Enter", width: 80, classes: "control"},
			"backspace": { func: "backspace", classes: "control backspace", width: 65},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "control featured"}
		},

		default: [
			"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
			"{tab} й ц у к е н г ш щ з х ъ \\",
			"{caps} ф ы в а п р о л д ж э {enter}",
			"{shiftl} я ч с м и т ь б ю . {shiftr}",
			"{next} {space} , {accept}"
		],
		shifted: [
			"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
			"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
			"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
			"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
			"{next} {space} , {accept}"
		],
		
		capsed: [
			"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
			"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
			"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
			"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
			"{next} {space} , {accept}"
		]		
	},

	"compact": {

		_meta: {
			"default": { keySet: "default", text: "abc", classes: "control"},
			"alpha": { keySet: "default", text: "Abc", classes: "control"},
			"shift": { keySet: "shifted", text: "ABC", classes: "control"},
			"numbers": { keySet: "numbers", text: "123", classes: "control"},
			"space": { key: " ", text: "Space", width: 200},
			"backspace": { func: "backspace", classes: "control"},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "featured"},
			"zero": { key: "0", width: 130}
		},

		default: [
			"й ц у к е н г ш щ з х ъ",
			" ф ы в а п р о л д ж э ",
			"{shift} я ч с м и т ь б ю {backspace}",
			"{numbers} , {space} . {next} {accept}"
		],

		shifted: [
			"Й Ц У К Е Н Г Ш Щ З Х Ъ",
			" Ф Ы В А П Р О Л Д Ж Э ",
			"{default} Я Ч С М И Т Ь Б Ю ",
			"{numbers} _ {space} {backspace} {next} {accept}"
		],

		numbers: [
			"1 2 3",
			"4 5 6",
			"7 8 9",
			"  {alpha} . {zero} {backspace} {next} {accept}"
		]
	},

	"numeric": {

		_meta: {
			"backspace": { func: "backspace", classes: "control"},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "control featured"},
			"zero": { key: "0", width: 130}
		},

		default: [
			"1 2 3",
			"4 5 6",
			"7 8 9",
			"_ - . {zero} {backspace} {next} {accept}"
		]
	}

};

Persian support

Hey
Is it OK if I fork and add support for Persian ?
Do you have specific strategy for supporting other langs?
My suggestion is this syntax :
data-layout="per_normal"
data-layout="pol_normal"
I think this is the easiest and most appropriate way for supporting other langs. what do you think?

Key auto-repeat support

For devices which support touchstart/touchend (or mousedown/mouseup?) it would be nice to see an auto-repeat function for when the user presses and holds a key (i.e. with configurable initial delay and repeat period). Would you consider pulling a patch which adds this functionality?

Design Question

Is there a way that i can customize the keys? as example i want to remove the "Space" on the space bar, and replace close with a arrow

Met karma loading related error when doing npm run build ...

Hi,
How to resolve below error? when doing npm run dev, it is normal ...
Thanks a lot!

--
D:\gitrepository\vue-touch-keyboard>npm run build

[email protected] prebuild D:\gitrepository\vue-touch-keyboard
npm run test

[email protected] pretest D:\gitrepository\vue-touch-keyboard
npm run lint

[email protected] lint D:\gitrepository\vue-touch-keyboard
eslint --ext=.js,.vue src test/unit/specs

[email protected] test D:\gitrepository\vue-touch-keyboard
npm run unit

[email protected] unit D:\gitrepository\vue-touch-keyboard
karma start test/unit/karma.conf.js

14 06 2017 13:19:07.724:ERROR [plugin]: Error during loading "D:\gitrepository\vue-touch-keyboard\node_modules/karma-phantomjs-launcher" plugin:
Path must be a string. Received null
14 06 2017 13:19:12.678:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
14 06 2017 13:19:12.683:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
14 06 2017 13:19:12.687:ERROR [karma]: Found 1 load error

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "unit"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] unit: karma start test/unit/karma.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script 'karma start test/unit/karma.conf.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! karma start test/unit/karma.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "test"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: npm run unit
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'npm run unit'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run unit
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prebuild: npm run test
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prebuild script 'npm run test'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log

D:\gitrepository\vue-touch-keyboard>

Does this work on vue 3?

Is there a port? Alternative projects?

Thanks.

Vue 2.5.10. Got Duplicate keys error.

Hi, I got Duplicate keys error since update to latest vue.
It worked fine Less than 2.5.10.
Reproduction Link: https://jsfiddle.net/5brbuv8a/

Met below error when compiling ...

Hi,

I am running "npm install", but got below error, how should I fix it? Thanks!

ERROR in ENOENT: no such file or directory, scandir 'D:\gitrepository\vue-touch-keyboard\node_modules\node-sass\vendor'
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?{"id":"data-v-3488ec3c","scoped":false,"hasInlineConfig":false}!.//sass-loader!./~/vue-loader
/lib/selector.js?type=styles&index=0!./dev/App.vue 4:14-303 13:3-17:5 14:22-311

ERROR in ENOENT: no such file or directory, scandir 'D:\gitrepository\vue-touch-keyboard\node_modules\node-sass\vendor'
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?{"id":"data-v-7962c167","scoped":false,"hasInlineConfig":false}!.//sass-loader!./~/vue-loader
/lib/selector.js?type=styles&index=0!./src/keyboard.vue 4:14-308 13:3-17:5 14:22-316
webpack: Failed to compile.

How to remove Next button from numeric layout

I want to use the numeric layout without Next button. Let me know is it possible to remove multiple buttons such as "_" and "." buttons