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 numeric with numbers 0-9
Standard numeric with alternate characters %, +, etc
Left column keys: Fixed width, non-language specific, affects keyboard layout and content.
Right column keys: Fixed width, non-language-specific, affects the active text box.
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.
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.
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
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
The virtual keyboard is automatically invoked as being one of the following types when an input field is active.
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>
Standard Numeric Layout
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.
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.
Virtual Keyboard Interaction with the Remote Control
The virtual keyboard perimeters have 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 () 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.
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.
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>