Virtual Keyboard

webOS TV includes an on-screen virtual keyboard. The virtual keyboard has the following characteristics:

  • Transitions from the bottom of the screen

  • Covers 100% of the screen width

  • Covers 1/3 of the screen height

  • Be able to accommodate up to 58 language-specific keys.

The virtual keyboard supports various layouts:

  • Standard QWERTY

  • Alpha-numeric 

  • Standard numeric with numbers 0-9

  • Standard numeric with alternate characters  %, +, etc

Virtual keyboard image that shows the layout

  1. Left column keys: Fixed width, non-language specific, affects keyboard layout and content.

  2. Right column keys: Fixed width, non-language-specific, affects the active text box.

  3. Center column keys: Varying width, 15 x 4 character keys, language-specific characters.

The virtual keyboard is the primary text input method for webOS TV apps, and you can customize the virtual keyboard for specific input types. For example, if you are asking your user for an email address or a URL, you can provide the keyboard that includes special characters for such purpose (e.g., @, full stop, and others). Similarly, if the user needs to type numbers, the standard numeric type can be provided. If you do not specify the input type, your user will be presented with a standard keyboard layout.

When an input field is focused, the virtual keyboard is automatically loaded. However, if the system detects a key press from a USB keyboard, the virtual keyboard disappears from the screen. To relaunch the virtual keyboard, you need to select an input field with a remote controller.

The virtual keyboard is always enabled and cannot be disabled; When an input field is focused, the virtual keyboard appears on the screen at all times.

Standard Virtual Keyboard Layout

The layout of the virtual keyboard can accommodate up to 58 language-specific keys. The keyboard covers 100% of the width and 1/3 of the height.

  • The left and right columns contain fixed-width, non-language-specific action keys.

  • The left column contains keys that affect the keyboard layout and content.

  • The right column contains keys that affect the active text box.  

Virtual keyboard image that shows fixed keys and variable width keys


Universal Keys

Legend color of Universal Keys Universal Keys 

Virtual keyboard image that shows universal keys, semi-universal keys, and variable keys

Universal Keys are not language-specific and always provide the same functions. They appear, at all times:

  • In the same size.

  • In the same position.

Legend color of Semi-Universal Keys Semi-Universal Keys

Semi-Universal Keys are not language-specific, but not necessarily applicable to all character sets and contextual configurations.

  • Accent key will be available in situations where the language supports accented characters. 

  • The Shift key will be available in situations where there are both upper and lowercase versions of the character set, or alternate characters are associated with the keys

Legend color of Variable Keys Variable Keys

Variable Keys can support any characters or configurations. The variable keys can have the variable width, and height, but must fit within the designated variable keyspace. 

Standard Virtual Keyboard Layout Transition

Input Type

The virtual keyboard is automatically invoked as being one of the following types when an input field is active.

Virtual keyboard image that shows the layout transition

  • text

    Text type of virtual keyboard
  • number

    Number type of virtual keyboard
  • email

    Email type of virtual keyboard
  • url

    URL type of virtual keyboard

To use a virtual keyboard in a general web app, set the input type attribute in HTML as below. Depending on the input type, a specific type of the virtual keyboard will appear.

<input type = "url" ...>

Standard Numeric Layout

The standard numeric layout of the virtual keyboard

The standard numeric layout contains the numbers 0-9, a switcher to get to the special characters. The keyboard covers 100% width x 10% height of the screen. The numeric keyboard is shown only when users have to enter a defined number of digits. 

View Area

If the active text field is above the virtual keyboard area when selected, the virtual keyboard's transition on the screen does not shift the content below.

If the text input field of a web app is in the lower section of the screen, it will be moved up when the virtual keyboard is displayed. The web app is not resized, but the app content is moved up to allow the text input field to be visible for users to enter content.

All text fields must be followed by a space with a minimum of 1/3 screen height to accommodate the virtual keyboard without being obscured.

The area that is shown the text field and the virtual keyboard on the screen 

Virtual Keyboard Interaction with the Remote Control

The virtual keyboard and its' bumpers

The virtual keyboard perimeters have Bumpers (Legend color of Bumpers). The Bumpers stop the cursor at the edge of the keyboard. The Bumpers:

  • Allow users to navigate to common actions quickly when using the arrows on the remote control

  • Enable users to navigate between the keyboard and the content area easily

  • Make the cursor behavior of both the wand and the 5-way consistent

Users can access the Oversized Keys (Legend color of Oversized keys) from any surrounding key by following the grid in the virtual keyboard. Exiting an Oversized Key returns users to the original entry point on the grid.

Virtual Keyboard Language Switching

webOS TV enables users to select up to five languages including the current locale language for the virtual keyboard in the webOS TV Settings.

The language button of the virtual keyboard

When the user selects the language button, the virtual keyboard switches between the languages that were specified in the webOS TV Settings app.

webOS TV handles the language switch, as a web developer, you do not need to write any code in your app to support such behavior. In fact, apps cannot specify the language of the virtual keyboard. webOS TV will display a virtual keyboard based on the language users have specified using the language button on the virtual keyboard. 

For how to use the virtual keyboard, refer to Virtual Keyboard sample.

Secure Input

You can define whether to show or hide the characters the user enters. For example, if a user needs to input characters masked like a password or sensitive information, you can provide secure input.

The following code is a sample of secure input for a general web app. 

<input type = "password", ...>