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.
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 Layout
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.
NoteThe ABC style layout is supported from 2022 products with Tizen 6.5. Before 2022 products upto Tizen 6.0, use QWERTY layout only. After 2022 products, use QWERTY layout and ABC style layout.
Products
QWERTY Layout
ABC Layout
~ 2021 (upto Tizen 6.0)
Yes
No
2022 ~ (since Tizen 6.5)
Yes
Yes
Table 1. IME Layout support table
IME Floating Style
The IME Floating Style is disabled by default. It is supported starting from 2022 products (since Tizen 6.5).
For email/number/password/tel/url/text input type,use “Done” as the default Return Key. When these input element is in form tag, use “Go” as Return Key.
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.
For textarea tag and contenteditable attributes, use “Go” as the Return Key.
IME Enable/Disable
Using IME to interacts with the application is enabled by default. But if application want to disable it, application can set as the table:
Disable IME method:
Indicate no matter user action or non-user action, all can not show IME.
Disable IME only when non-user action method:
Indicate only when user action can show IME, such as press "Enter" key on editable element by Remote Control, or click on the editable element by mouse. When JS set focus on editable element automatically, IME can not be shown.
IME Show/Hide Scene
IME Show Scene
IME will be shown by user action, such as press on editable element by Remote Control or click on the editable element by mouse; also can be shown by non-user action. The table lists the whole scene of IME show.
Input Device
Operation to Show IME
Remote Control
Press “Enter” key on the input element by Remote Control
Mouse
Click on the input element by mouse
js
js set focus to the input element
Table 2. IME show scene table
IME Hide Scene
IME will be hidded by user action, such as press the “Back” key on Remote Control or press the “Done” key on IME, also can be hidden by non-user action.The table lists the whole scene of IME hide:
Input Device
Operation to Hide IME
Remote Control
When IME shows, Press “Done”/“Go”/“Search” key on IME panel by Remote Control
When IME shows, press “Back” key on Remote Control
When IME shows, move the focus on the top of IME, then press “Up” key on Remote Control
keyboard
When IME shows, connect a physical keyboard, and press any key on the physical keyboard
Mouse
When IME shows, click “Done”/“Go”/“Search” key on IME panel by Mouse
When IME shows, click any uneditable element which out of IME
js
When IME shows, js change the current focused input element to uneditable or blur.
Table 3. IME hide scene table
NotePressing "Up" key on top of IME will hide IME” is supported from 2020 products.
Before 2020 products: pressing "Up" key on top of IME, only deliver the “Up” key event to webapp, will not take the initiative to hide IME.
After 2020 products: pressing "Up" key on the top of IME will hide IME and deliver the “Cancel” key event to webapp. Press "Up" key on top of IME handle as same as press "Back" key by Remote Control.
Products
Hide IME
Deliver key event to webapp
~ 2019 (upto Tizen 5.5)
No
deliver "Up" key event
2020 ~ (since Tizen 6.0)
Yes
deliver "Cancel" key event
Table 4. press up key on top of IME behavior
Detecting Keyboard and IME Input
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.
Remote Control Key
Keyboard Key
ArrowLeft
Left
ArrowUp
Up
ArrowRight
Right
ArrowDown
Down
Enter
Enter
Back
ESC
Remote Control Key
Keyboard Key
Smart Hub
F5
Source
F6
ChannelList
F7
VolumeMute
F8
VolumeDown
F9
VolumeUp
F10
ChannelDown
F11
ChannelUp
F12
Table 5. Keyboard equivalents to remote control keys
The keyCode for most IME keys is 229, but special keys have unique keyCode values.
IME
keyCode
Done
65376
Cancel
65385
Other keys
229
IME
keyCode
Left
37
Up
38
Right
39
Down
40
IME
keyCode
Space
32
Backspace
8
Delete All
46
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.
NoteFrom 2021 products with Tizen 6.0, IME layout without “Cancel” key. But in some scenarios, some key event will be handled as “Cancel” key event. For example, press “Back” key on IME by Remote Control, or press “Up” key on the top of IME by Remote Control, the “Back” key and “Up” key will be handled as “Cancel” key.
Handling the IME
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:
The focus event is fired when the input element is focused.
The blur event is fired when the input element loses focus.
The change event is fired when the value of the input element changes.
<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;
}
});
ImportantThe preventDefault() method prevents the default action (insert or delete text) of the input element from triggering. Do not call the preventDefault() method for the keydown event.
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.