top

Keyboard / IME

This document covers description of keyboard and IME and how to handle IME.

Overview

There are external keyboard and virtual keyboard.

  • Keyboard
    If user connects keyboard with Samsung TV, user can use keyboard on application. Keyboard is useful when user inputs long string.
  • IME (Input Method Editor)
    If input or textarea element is focused, IME (virtual keyboard) is shown. If you connect external keyboard and click any character key, IME is automatically hidden.

Figure 1. Keyboard

Figure 1. Keyboard

Figure 2. IME

Figure 2. IME

Note

You don’t have to register every keys of keyboard and IME, unlike remote controller.

Keyboard and IME have several features. Please refer to following.

Keyboard

Keyboard has several same keys with remote controller. You can use keyboard instead of remote controller. Please refer to the following table.

Table 1. Key of Remote Controller and Keyboard
Remote Controller Keyboard Remote Controller Keyboard
ArrowLeft Left Smart Hub F5
ArrowUp Up Source F6
ArrowRight Right ChannelList F7
ArrowDown Down VolumeMute F8
Enter Enter VolumeDown F9
Back ESC VolumeUp F10
ChannelDown F11
ChannelUp F12

In case input or textarea element is focused and keyboard is connected and then IME is hidden, keyboard has keyCode like that of IME. This is because keyboard is used in place of IME. For example,

  • keyCode of “Enter” is 65376, not 13.
    It is used in place of “Done” of IME, not “Enter” of remote controller.
  • keyCode of “ESC” is 65385, not 10009.
    It is used in place of “Cancel” of IME, not “Back” of remote controller.

IME

Most of keyCode is 229, but several keyCodes are a little different.

Table 2. KeyCode of IME
Key keyCode Key keyCode Key keyCode
Done 65376 Left 37 Space 32
Cancel 65385 Up 38 Backspace 8
Right 39 Delete All 46
Other keys 229 Down 40

Handling IME

  • As mentioned above, if input or textarea element is focused, IME is shown.
    You can handle IME by adding event on input element.

    • focus event is fired when input element is focused.

    • blur event is fired when input element loses focus.

    • change event is fired when value of input element is changed.

    <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.");
    });
    

You can handle the status when IME is closed by receiving keyCode of “Done” and “Cancel”. Please refer to the following.

document.body.addEventListener('keydown', function(event) {
	switch (event.keyCode) {
		case 65376: // Done
			// Something you want to do
		break;
		case 65385: // Cancel
			// Something you want to do
		break;
	}
});

For reference, you can get user input value by using the following method.

var value = document.getElementById('input').value;
console.log(value);

Notification for Closing IME

If clicking “Done”, “Cancel” key of IME or “Back” key of remote controller, IME is closed. However, input element has been focused and wrong keyCode of remote controller becomes given.

For example, during IME is shown, if clicking “Back” key of remote controller, IME is hidden and keyCode value is 65285. It is same as “Cancel”. But after that, if clicking “Back” key again, keyCode value is 229, because input element is still focused.

To prevent this issue when IME is closed, you should blur input element. Please refer to the following.

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;
  }
});
Important

In case preventDefault method is called, default action (Insert / delete text) of input element isn’t triggered. If preventDefault method is called on keydown event, you should remove it.

Sample Applications