Lumio On-screen Keyboard

A customized javascript virtual keyboard based on simple-keyboard.


Getting Started

Installation

Usage with script tag right in the browser without any build step 

<html>
    <head>
        ...
        <link rel="stylesheet" href="https://sdk.lumio.id/webview/dist/lumio-os-keyboard/v1/lumio-os-keyboard.min.css?rel=1705047844022" />
    </head>
    <body>
        ...
        <script src="https://sdk.lumio.id/webview/dist/lumio-os-keyboard/v1/lumio-os-keyboard.min.js?rel=1705047844023"></script>
    </body>
</html>

Audio

Enable sound when typing on Keyboard.

<html>
    <head>
    ...
    </head>
    <body>
        ...
        <audio id="lumio-osk-audio">
            <source src="https://sdk.lumio.id/webview/dist/lumio-os-keyboard/audio/keypress.wav" type="audio/wav" />
            Your browser does not support the audio element.
        </audio>
        ...
    </body>
</html>

How to Use
  1. Element id attribute is required.
  2. Add .lumio-osk class to HTML tag input or textarea.
  3. There are 3 types on-screen keyboard available modal, dropdown & fixed by default LumioOsk will use modal type.

To change type simply define on element data-osk-type attribute. 

<input type="text" id="unique-id" class="lumio-osk" data-osk-type="dropdown" />

To customize on-screen keyboard width using data-osk-width attribute with css width properpty value (100%, 320px, 40vw, etc) 

<input type="text" ... data-osk-width="40vw" />

OSK Type

Modal

a Modal will pop up covering entire screen with an input or textarea and the on-screen keyboard.
You can customize the input label using data-osk-prompt. 

<div>
    <label for="example-modal-input">Text</label>
    <input type="text" id="example-modal-input" class="lumio-osk" data-osk-type="modal" data-osk-prompt="Input a valid email address" />
</div>

OSK Type

Dropdown

On-screen keyboard will be show up under input or textarea which on focus 

<div>
    <label for="example-dropdown-input">Input Text</label>
    <input type="text" id="example-dropdown-input" class="lumio-osk" data-osk-type="dropdown" />
</div>

OSK Type

Fixed

On-screen keyboard will be show up by default at the bottom of the screen.
You can Click (Touch on touch-screen device) the top part of the on-screen keyboard and drag/move to adjust keyboard position. 

<div>
    <label for="example-fixed-input">Input Text</label>
    <input type="text" id="example-fixed-input" class="lumio-osk" data-osk-type="fixed" />
</div>

Customization

data-osk-type

Select how to render the Keyboard, by define it on data-osk-type="..." attribute. Available type:

  • modal
  • dropdown
  • fixed
<div>
    <label for="example-modal-input">Input Text (modal)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="modal" data-osk-prompt="Email Address" />
</div>
<div>
    <label for="example-modal-input">Input Text (dropdown)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" />
</div>
<div>
    <label for="example-modal-input">Input Text (fixed)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="fixed" />
</div>

Customization

data-osk-prompt

label for input on OSK Type modal.

<div>
    <label for="example-modal-input">Username/Email</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="modal" data-osk-prompt="Username/Email" />
</div>
<div>
    <label for="example-modal-input">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="modal" data-osk-prompt="Custom label using prompt" />
</div>

Customization

data-osk-width

Change keyboard width using css width attribute value e.g. (320px, 80vw, 100%, etc).


If defined this value will override keyboard default width.

<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="modal" data-osk-width="50%" />
</div>
<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-width="560px" />
</div>
<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="fixed" data-osk-width="26rem" />
</div>

Customization

data-osk-position

Keyboard can be placed on four different sides in relation to the reference element. Additionally, it can be aligned to the reference element edge, rather than being centered. 


<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-position="top" />
</div>


Customization

data-osk-save-position

Keyboard with data-osk-type="fixed" can save current position before it close, if data-osk-save-position="true" is defined. Input or textarea with the same customization will use previous position to show the Keyboard. 


<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="fixed" data-osk-save-position="true" />
</div>

Customization

data-osk-layout-name

Change Keyboard layout from available layout name. data-osk-layout-name="numeric"
layout name list:

  • default
  • numeric
  • alphanumeric

<div>
    <label for="...">Input Text (default layout-name)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-layout-name="default" />
</div>
<div>
    <label for="...">Input Text (numeric layout-name)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-layout-name="numeric" />
</div>
<div>
    <label for="...">Input Text (alphanumeric layout-name)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-layout-name="alphanumeric" />
</div>

Customization

data-osk-audio

If an audio element for LumioOsk exists, by default LumioOsk will play an audio onKeyPress. You can mute the audio for input or textarea using data-osk-audio="off". 


<div>
    <label for="...">Input Text</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" />
</div>
<div>
    <label for="...">Input Text (audio off)</label>
    <input type="text" id="..." class="lumio-osk" data-osk-type="dropdown" data-osk-audio="off" />
</div>

Methods

open

Show the on-screen Keyboard via method and it will remain displayed until the close method is called. 

LumioOsk.open({options});

All Options

Options are configurable properties you can pass optionally when call LumioOsk.open({...}) .



type string

You can choose between {type: "fixed"} or {type: "dropdown"}.
For dropdown type, dropdownTarget option is required.



dropdownTarget string (dropdown type only)

Keyboard will be rendered around target when the "dropdown" type is used. target value is a HTML element id attribute value {dropdownTarget: "#uniqe-id"}.



width string

Customize Keyboard width using css width property value e.g. (320px, 80vw, 100%, etc). {width: "50%"}.



layoutName string

Change Keyboard layout from available layoutName {layoutName: "numeric"}.
layoutName list:

  • default
  • numeric
  • alphanumeric


audio boolean

Allow keyboard to play or mute sound when type, if LumioOsk audio element exists. {audio: true}.



moveable boolean (fixed type only)

Allow keyboard to be move {moveable: true}.



savePosition boolean (fixed type only)

Save current position of the Keyboard if moveable. This saved position will be use by next Keyboard with the same configuration. {savePosition: true}.



position string

The preferred placement of the keyboard {position: "top"}.

• top
• top-start
• top-end
• right
• right-start
• right-end
• bottom
• bottom-start
• bottom-end
• left
• left-start
• left-end


skOptions object

You can customize the Keyboard by passing simple-keyboard options. For more details see simple-keyboard documentation options. 

LumioOsk.open({
    ...,
    skOptions: {
        onChange: function(input) {
            console.log(input);
        },
        ...
    }
});

Methods

close

Remove currently active LumioOsk keyboard instance.

LumioOsk.close();

Methods

getKeyboard

Get currently active simple-keyboard instance.
Visit simple-keyboard documentation for more details. 

var keyboard = LumioOsk.getKeyboard();
keyboard.setOptions({...});
keyboard.getInput();