This topic describes how your application can receive input from a physical keyboard or a virtual keyboard (IME).
The user can interact with your application by entering text with a virtual keyboard (IME). When an input or textarea element in your application is focused, the virtual keyboard is shown.
input
textarea
The user can also connect a physical keyboard to the TV to enter text more conveniently. When a physical keyboard is connected, the IME is automatically hidden by pressing any key on the physical keyboard.
IME support two layouts of QWERTY and ABC. If input type is email and password, use the QWERTY style layout. Otherwise, use the ABC style layout.
Table 1. IME Layout support table
For password input type with minlength attributes, the initial IME Return Key(“Done” or “Go”) is disabled; and until the input text length meet minlength, the IME Return Key been enabled:
<input type ="password" minlength=6>
For search input type, use search icon as the Return Key.
Using IME to interacts with the application is enabled by default. But if application want to disable it, application can set as the table:
<tizen:metadata key="http://samsung.com/tv/metadata/use.ime" value="false"/>
<tizen:metadata key="http://samsung.com/tv/metadata/use.keypad.without.useraction" value="false"/>
Table 2. IME show scene table
Table 3. IME hide scene table
Table 4. press up key on top of IME behavior
Keyboard and IME input is detected in much the same way as remote control input, except that you do not need to register individual keyboard and IME keys.
Some of the keys on a physical keyboard correspond to keys on the TV remote control.
Table 5. Keyboard equivalents to remote control keys
The keyCode for most IME keys is 229, but special keys have unique keyCode values.
keyCode
Table 6. IME keyCode values
When a physical keyboard is connected, an input or textarea element is focused, and the IME is hidden, the physical keyboard acts in place of the IME and sends the IME keyCode values. For example, pressing "Enter" on the keyboard sends the keyCode for the IME "Done" key, not the remote control "Enter" key; pressing "ESC" key on the keyboard sends the keyCode for the IME "Cancel" key, not the remote control "Back" key.
The IME is automatically shown when an input or textarea element is focused, and hidden when the element loses focus.
To handle the IME input, create listeners for the input element events:
focus
blur
change
<input id='input' type='text'>
document.getElementById('input').addEventListener('focus', function() { console.log("input element is focused and ready to get user input."); }); document.getElementById('input').addEventListener('blur', function() { console.log("input element loses focus."); }); document.getElementById('input').addEventListener('change', function() { console.log("input element value is changed."); });
To retrieve the user input value:
var value = document.getElementById('input').value; console.log(value);
To close the IME when the "Done" IME key, or the remote control "Back" key, is clicked, listen for the appropriate keyCode values. You must also remove focus from the input element:
document.body.addEventListener('keydown', function(event) { switch (event.keyCode) { case 65376: // Done document.getElementById('input').blur(); break; case 65385: // Cancel document.getElementById('input').blur(); break; } });
preventDefault()
keydown