Virtual Keyboard

A VirtualKeyboard shows a keyboard on the screen with keys that can be pressed.

The example below creates a keyboard and adds it to the scene. The only required option in VirtualKeyboardOptions is the size of the keyboard.

note

Why does m2c2kit have a VirtualKeyboard and not use the keyboards provided by Android and iOS devices? The VirtualKeyboard precisely specifies the keyboard, such as the size, font, and layout of the keys. This is important for assessment standardization. It also collects information such as exactly where the user pressed the key. In contrast, built-in virtual keyboards on mobile devices vary by platform, may have user customizations the researcher is unaware of (e.g., swipe typing), and don't provide full information about the user's keyboard interactions.

Events

A keyboard isn't very useful if it can't be used to type. The VirtualKeyboard has two events that detect when a key is pressed: onKeyDown and onKeyUp. Both events pass a VirtualKeyboardEvent to the event handler.

This event has information on what key was pressed (key) and the key's code (code). code is the internal representation of the key, regardless of any modifiers, while key is the user intent of the key press. For example, if the user presses a while holding down Shift, code will be a and key will be A. If the user presses a without holding down Shift, code will be a and key will also be a.

tip

Confused? When collecting user input, use key. When detecting special keys (Shift, Backspace), use code.

To place the user's typing into the label, the example has an event handler for the onKeyDown event:

• If the key pressed is Shift, the event handler doesn't do anything because we don't want to add Shift to the label's text.
• If the key pressed is Backspace, the last character is removed from the label's text.
• For all other possibilities, the key is added to the label's text.

keyboard.onKeyDown((e) => {
    if (e.code === "Shift") {
        return;
    }
    if (e.code === "Backspace") {
        label.text = label.text.substring(0, label.text.length - 1);
        return;
    }
    label.text = label.text + e.key;
});

Customization

The VirtualKeyboard is highly customizable. You can change colors, key preview behavior, key layout and size -- even the text, images, and fonts on the keys.

Although the default keyboard is a US English QWERTY keyboard, setting VirtualKeyboardOptions will allow you to create keyboards for other languages and layouts. See the example under Explore for a customized keyboard.

Run

Loading...

Explore:

• This fun numeric keypad shows how you can customize the keyboard configuration: use emoji, change the keyboard layout, and specify the text or images to show on each key. It also demonstrates how to collect key tap metadata on exactly where the user tapped the key.