Menu ▾ ▴

English

IT-Maker

keyboard.js

Please read this instructions before using keyboard.js.

License

Copyright 2014 IT-Maker http://www.it-maker.org mail@it-maker.org

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

What is keyboard.js?

Keyboard.js is a peace of JavaScript. With this script you can include a on-screen keyboard to your HTML website.

Usage

Preparations

Import keyboard.js in the head of your site:
http://pastebin.com/1270i9tv

The function to react to a click to the enter button:

Zusätzlich eine JavaScript Funktion <keyboard_enter_pressed(id)> anlegen, um das drücken des Enter-Buttons auszuwerten:
http://pastebin.com/HHH6kNYZ</keyboard_enter_pressed(id)>

Display the keyboard

The keyboard is displayed in a div-container. Create the div: (id is arbitary)
http://pastebin.com/s583hWUn

Output of the written text

The output of the written text could be an simple input-field. (id is arbitary)
http://pastebin.com/Yykv2VQ6
(Ausgabe means output)

Using keyboard.js

Input the remaining JavaScript code before closing the body-tag:
http://pastebin.com/UPMtkSdb

Creating the reference

    var keyboard = new keyboard('tastatur');

The variable 'keyboard' has to be exactly 'keyboard'. When using another name the script wouldn't work!
The string 'tastatur' stands for the ID of the div-container in which the keyboard is outputed.

Defining the outputfield

    keyboard.output = document.getElementById('output');

The string 'output' is the ID of the element in which the written text is shown.

Creating a single key

    keyboard.addKey('Q', 'keyboardbtn');

creates a key. The first parameter is the value (letter) of the key. The 2nd parameter stands for the css-class of the buttons.

Line break

Um die nächsten Elemente auf einer neuen Zeile auszugeben, wird folgender Code verwendet:
For showing the following elements on a new line:
http://pastebin.com/QvmPQBZd

HTML-Code

You can show HTML-Code between the keys:
http://pastebin.com/Sr2HGwft
The parameter is the HTML-Code.

Complete keyboard

You can show a complete keyboard:
http://pastebin.com/SKvTWuTR
The parameter stands for the css-class of the buttons.

MongoDB Logo MongoDB