Modifier Key Emulation

Browser generated on-screen modifier keys can be useful on tablet computers that do not provide them in their on-screen keyboards.

On-screen Modifier Keys

The following checkboxes represent modifier keys - they behave as locking keys.

The checkboxes can be toggled directly, or by using the buttons. They provide testable values which are used to emulate the keyboard modifier keys.

Example

This shows which real or emulated modifier keys were active when the click me button was clicked or when a character was typed in the box.

The click me button makes use of the onclick event. The user may choose which of the three onkey events is to be used for typed input.

Browsers do not provide modifier key status for the real capslock or fn keys. There may also be differences between browsers and operating systems.

HTML code for the on-screen altKey:

<input type="button" id="altButton" value="alt">:<input type="checkbox" id="altKey" value="alt">

JavaScript code for the on-screen altKey:

var $ = function (id) { return document.getElementById(id); };

var altSet = false;

function modifier(key, event) { return event[key] || $(key).checked; }

$('altButton').onclick = function () {
    $('altKey').checked = !$('altKey').checked;
};

HTML code for the click me button:

<input type="button" id="clickMe" value="click me">

JavaScript code for the onclick event:

$("clickMe").onclick = function (event) {
    altSet = modifier('altKey', event);
};

Examine the page source for further details. The JavaScript code is here.

The license conditions are here.

Tuesday 14 April, 2015

W3C HTML5 Validation