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 Transition

Input Type

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

  • 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.

<form>
<input type = "url" ...>
</form>

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 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. 

<form>
<input type = "password", ...>
</form>
Navigation