vue-keyboard

GitHub

Installation

Either download the files from the repository or install with Bower:

$ bower install --save vue-keyboard

Basic Usage

Once you've added the JavaScript for the component to your application, you will be able to use it. The included CSS is optional and acts as more of a guide to laying out your keyboard.

To embed a simple keyboard with numbers 0-9, the markup could look like:

<keyboard layouts="123|456|789|0"></keyboard>

Giving the following result:

Capturing Input

You can use the v-model attribute to bind the keyboard value to a value in your application.

Assuming your application has a data property input:

<keyboard v-model="input" layouts="123|456|789|0"></keyboard>

Giving the following result:

{{ input }}

Limiting Length

You can use the maxlength attribute to restrict the maximum input length via the keyboard.

<keyboard v-model="input" :maxlength="6" layouts="123|456|789|0"></keyboard>

Giving the following result:

{{ input2 }}

Multiple Layouts

Multiple keyboard layouts can be provided an an array to the layouts attribute. From there you can use the special goto:n key to toggle between them:

<keyboard :layouts="['123|456|789|0{toggle:goto:1}','ABC|DEF|GHI|J{toggle:goto:0}']"></keyboard>

Special Keys

Custom functionality can be attached to keys within the keyboard using the {text:action} syntax, for example;

<keyboard layouts="01234|56789|{double:dub}" @dub="double"></keyboard>

{{ input3 }}

In this example, we tell the double button to emit an event named dub. We listen for that event with the @dub="double" directive, which calls the double function in the main Vue application, which looks like this:

double: function(keyboard) {
    if (keyboard.value.length > 0) {
        keyboard.mutate((keyboard.value * 2).toString());
    }
}

Note there is some inbuilt special functionality, those being: space to add a whitespace character, backspace to delete the last character, clear to clear all input and goto:n to swap the keyboard over to a different layout.

Complete Example

Here is a complete example:

<keyboard
    v-model="input"
    :layouts="[
        '1234567890{delete:backspace}|qwertyuiop|asdfghjkl|{shift:goto:1}zxcvbnm|{space:space}{reverse:reverse}',
        '!@#$%^&*(){delete:backspace}|QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{space:space}{reverse:reverse}'
    ]"
    :maxlength="16"
    @reverse="reverse"
></keyboard>

{{ input4 }}