angular-virtual-keyboard

An AngularJs Virtual Keyboard Interface based on GreyWyvern VKI

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-virtual-keyboard
71270.4.37 years ago8 years agoMinified + gzip package size for angular-virtual-keyboard in KB

Readme

angular-virtual-keyboard
npm version Bower version
An AngularJs Virtual Keyboard Interface based on GreyWyvern VKI. See example in the Demo page.
Demo image

Install

With bower

$ bower install angular-virtual-keyboard

With npm

$ npm install angular-virtual-keyboard

Dependencies

Obs.: Required to auto-hide the keyboard interface in mobile devices or to use the 'vk-force-mobile' configuration.

Usage

  1. Import the ``angular-virtual-keyboard.min.js`` script in your page.

  1. Include the module ``angular-virtual-keyboard`` in your angular app.

  1. Include the module ``angular-useragent-parser`` in your angular app. Optional, used to auto hide the virtual keyboard interface in mobile devices.

  1. Use the 'ng-virtual-keyboard' directive in any text fields, password fields or textareas:

<input type='text' ng-model="yourModel" ng-virtual-keyboard/>

Supported Configurations

Directive global configurations

The angular-virtual-keyboard module use an Angular.js Constant named `VKI_CONFIG to handle the configurations that will be applied to all instances of the ng-virtual-keyboard` directive. See list below:
- Keyboard layouts configurations `VKI_CONFIG.layout` Array of Keyboard Layout configurations. See vki-layouts.js for keyboard layout configuration examples. - Deadkeys configurations `VKI_CONFIG.deadkey` Array of Deadkeys configurations. See vki-deadkeys.js for deadkeys configuration examples. - Default keyboard layout `VKI_CONFIG.kt` Name of the layout configuration to be used as default (if no specific layout configuration is provided in the directive instance configuration). Default: 'US International' - Relative position `VKI_CONFIG.relative Use true to position the keyboard next to the input, false to place in the bottom of page. _Default: true` - Adjust keyboard size `VKI_CONFIG.sizeAdj Allow user to adjust keyboard size. _Default: true` - i18n configuration `VKI_CONFIG.i18n` An array to replace the default labels of the keyboard interface. See example below: - Custom CSS Class `VKI_CONFIG.customClass` A CSS class name to add in the first html element of the keyboard
VKI_CONFIG.i18n = {
	'00': "Exibir teclado numérico",
	'01': "Exibir teclado virtual",
	'02': "Selecionar layout do teclado",
	'03': "Teclas mortas",
	'04': "Ligado",
	'05': "Desligado",
	'06': "Fechar teclado",
	'07': "Limpar",
	'08': "Limpar campo",
	'09': "Versão",
	'10': "Diminuir tamanho do teclado",
	'11': "Aumentar tamanho do teclado"
};

Directive instance configurations

The `ng-virtual-keyboard` could receive an array with the configurations that will be applied to the keyboard interface instance of the input field. See list below:
- Default keyboard layout `kt` Change the default keyboard which displays first for each directive instance. Default: Defined in global configuration - Dead keys `deadkeysOn` To turn dead keys on or off by default. Default: true - Number pad `numberPad` To enable de number pad button. Default: false - VKI Version `showVersion` To show the VKI-core based version. Default: false - Imageless mode `imageURI` By default the keyboard will be show on input field focus. Pass a image URI to add a clickable image next to inputs and replace the on focus default behavior. Default: false - Show in mobile `showInMobile` True to display the interface on mobiles devices. Default: false - Foce position `forcePosition Force to position the virtual keyborad above (_use "top"_) or below (_use "bottom"_) the input field. Use false` to let the directive choose the better position. Default: false - Enter callback `enterSubmit` Define a callback function for the enter key. Use true to submit forms when Enter is pressed or a function to execute a custom function. Default: false (See enterSubmit issues #5) - Relative position `relative Use true to position the keyboard next to the input, and false to place in the bottom of page. _Default: true` - Keyboard size control `size` Five sizes based on font-size have been pre-programmed: 13px, 16px (default), 20px, 24px and 28px; corresponding to the sizes 1 to 5 respectively. Default: 3 - Adjust keyboard size `sizeAdj Allow user to adjust keyboard size. _Default: true` - Custom CSS Class `customClass` A CSS class name to add in the first html element of the keyboard

Example of use

See example in the Demo page or the demo code

License

The MIT License (MIT)
Copyright (c) 2015 Daniel Campos
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.