https://github.com/3dtech/on-screen-keyboard

A vanilla JavaScript on screen keyboard
https://github.com/3dtech/on-screen-keyboard

js json keyboard modular no-dependencies onscreen-keyboard simple touch webpack

Last synced: about 2 months ago
JSON representation

A vanilla JavaScript on screen keyboard

• Host: GitHub
• URL: https://github.com/3dtech/on-screen-keyboard
• Owner: 3dtech
• License: mit
• Created: 2017-04-26T12:50:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T12:02:21.000Z (11 months ago)
• Last Synced: 2024-11-22T21:50:05.578Z (about 2 months ago)
• Topics: js, json, keyboard, modular, no-dependencies, onscreen-keyboard, simple, touch, webpack
• Language: JavaScript
• Size: 9.23 MB
• Stars: 0
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# on-screen-keyboard

A vanilla JavaScript on screen keyboard

# Install

```

npm install on-screen-js-keyboard

```

or

```

```

# Usage

```

import OSK from 'on-screen-js-keyboard';

let keyboard = new OSK('input', 'keyboard-container'); // input field id, container id 

keyboard.on('change', (keyword) => {

	//do somehting

});

```

## Add new layout

```

keyboard.addLayout('no', {

	"name": "Norwegian",

	"keyboard":"Norwegian",

	"local_name": "English",

	"lang": "no",

	"keys": {

		"default": [

			["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", {"key": "Slett", "action": ["backspace"], "cls": "key2x"}],

			["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "\u00E5"],

			["a", "s", "d", "f", "g", "h", "j", "k", "l", "\u00f8", "\u00e6"],

			["z", "x", "c", "v", "b", "n", "m", ",", "-"],

			[{"key": " ", "cls": "key_spacebar"}]

			]

		}

});

```

## Change layout

```

keyboard.changeLayout('no');

```

## Change input field

```

keyboard.setOutput('other-input'); // ID of input field

```

or

```

let otherInput = document.getElementById('other-input');

keyboard.setOutput(otherInput); // Input field reference

```

## Build

```

npm install grunt -g

grunt

```