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

keyboard.png

  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 can be customized for specific types of inputs. For example, if you are asking your user for an email address or a URL, you can provide the keyboard that includes special cahracters 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 type of input, 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 will disappear from the screen. To relaunch the virtual keyboard, the user needs 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 will appear on the screen at all times.

Baseline Standard Layout Virtual Keyboard

The baseline standard 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 active text box.  

keyboard_baseline.png  

Universal Keys

keyboard_universal_color.png Universal Keys 

keyboard_universal.png

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.

 

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

keyboard_variable_color.png Variable Keys

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

Standard Layout Virtual Keyboard Transition

keyboard_transition.png

 

Input Type

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

 

 

 

 

  • text

     vk_text.png

  • number

     vk_number.png

  • email

      vk_email.png

  • url

     vk_url.png

 

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

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

 

For an enyo web app, enyo inputs (e.g. enyo.Input, onyx.Input, and moon.Input) will have the text input type by default, which will load the standard keyboard layout. The default keyboard will be provided if no type is mentioned. A number, email, or url type can be used instead of text, which will load a keyboard of that type.

{
 kind: "moon.Input",
 type: "url"
}

 

The above enyo code will internally generate an HTML input element with the type attribute set to url, which will then result in the url keyboard opening instead of the standard keyboard layout.

Standard Numeric Layout

keyboard_numeric.png

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 will be shown only when a defined number of digits is entered. 

View Area

If the active text field is above the virtual keyboard area when selected, the virtual keyboard's transition on 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 the user 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.

 keyboard_viewarea.png  

Virtual Keyboard Interaction with the Remote Control

keyboard_interaction.png

 

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

  • Allow the user 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

 

The user can access the Oversized Keys (keyboard_semi_universal_color.png) from any surrounding key by following the grid in the virtual keyboard. Exiting an Oversized Key returns the user 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.

VirtualKeyboard_31_1Lanugage_Labeled.jpg

 

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 the user has 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 the secure input.

 

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

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

 

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

{
 kind: "moon.Input",
 type: "number",
 style: "-webkit-text-security: disc;"
}

 

Navigation