Handling System UI Event

From webOS TV 3.0, the visibility of the virtual keyboard and the cursor can be detected by using the following events:

You can use these events to figure out the remote control's navigation mode or whether your app is focused or blurred. This article explains how to handle visibility events with simple code.

Handling keyboardStateChange Event

When the virtual keyboard appears or disappears, the keyboardStateChange event occurs and returns the following event.detail.visibility property value:

  • true: Virtual keyboard appeared.

  • false: Virtual keyboard disappeared.

The following code snippet shows how to handle the keyboardStateChange event.

function keyboardVisibilityChange(event) {
    var visibility = event.detail.visibility;
    if(visibility){
        console.log("Virtual keyboard appeared");
        // Do something.
    }
    else{
        console.log("Virtual keyboard disappeared");
        // Do something.
    }
}
document.addEventListener('keyboardStateChange', keyboardVisibilityChange, false);

You can test the virtual keyboard visibility with the code below. This code also includes additional event handlers for key input (input, change, keypress, keyup, and keydown events). Details can be found after the code.

<html>
<head>
<script>

	function load() {
		document.addEventListener('keyboardStateChange', keyboardVisibilityChange, false);
		var textinput = document.getElementById("text1");
		textinput.addEventListener('input', inputfunc, false);
		textinput.addEventListener('change', inputfunc, false);
		textinput.addEventListener('keypress', keyfunc, false);
		textinput.addEventListener('keyup', keyfunc, false);
		textinput.addEventListener('keydown', keyfunc, false);
	}

	function keyboardVisibilityChange(event) {
		var visibility = event.detail.visibility;
		if(visibility)
			Log("Virtual keyboard appeared");
		else
			Log("Virtual keyboard disappeared");
	}

	function inputfunc(event) {
		var x = document.getElementById("text1");
		Log(event.type + ": " + x.value);
	}

	function keyfunc(event) {
		Log(event.type + ': keyCode=' + event.keyCode + ' which=' + event.which);
	}

	var line = 0;
	function Log( msg ) {
		console.log(msg);
		document.getElementById('log').innerHTML += ++line + ": " + msg + "<br>";
	}
</script>
</head>
<body onload="load()" style="background-color:black; color:white">
	<input id="text1" type="text">
	<div id="log"> </div>
</body>
</html>
 

  • input event handler
    Detects every character input in the text input field. The input event is useful when you check the key input from the virtual keyboard.

  • change event handler
    Detects the value change of the text input field. The change event is useful when you want to check whether the enter key is pressed on the virtual keyboard.

  • keypress, keyup, keydown event handlers
    These events are usually used for detecting the keypress. However, these events do not work for webOS TV's virtual keyboard. Therefore, the keyfunc callback function in this code will not work when using the virtual keyboard.
    Note. These events can only detect the status changes of the control keys on the webOS TV's virtual keyboard. Control keys include the enter key and backspace key.

Handling cursorStateChange event

On webOS TV 2.x or later, the cursorStateChange event is supported. When the cursor of the Magic Remote or HID pointing device appears or disappears, the cursorStateChange event occurs and returns the following value with event.detail.visibility property:

  • true: Cursor appeared.

  • false: Cursor disappeared.

On the webOS TV 1.x, the curosrStateChange event is not supported. To check the cursor state,  use the keydown event. For the keycode of the cursor, refer to the following values.

  • 1536: cursor_show

  • 1537: cursor_hide

The following code snippet shows how to handle the cursorStateChange event.

function cursorVisibilityChange(event) {
    var visibility = event.detail.visibility;
    if(visibility){
        console.log("Cursor appeared");
        // Do something.
    }
    else{
        console.log("Cursor disappeared");
        // Do something.
    }
}
document.addEventListener('cursorStateChange', cursorVisibilityChange, false);

You can test cursor visibility with the code below. This code also includes additional event handlers:

  • blur and focus event handlers
    These events are fired when your app has lost or gained focus. When an overlay type system UI element such as Launcher or Settings menu appears, your app cannot receive pointer events. You can use these events to figure out whether your app is focused on.

<html>
<head>
<script>
	function load() {
		document.addEventListener("cursorStateChange", onCursor, false);
		document.addEventListener("visibilitychange", function () { Log(document.visibilityState);}, false);
		window.addEventListener("blur", function() { Log("Focus off");}, false);
		window.addEventListener("focus", function() { Log("Focus on");}, false);
	}

	function onCursor(event) {
		if (event.detail.visibility)
			Log("Cursor on");
		else
			Log("Cursor off");
	}

	var line = 0;
	function Log( msg ) {
		console.log(msg);
		document.getElementById('log').innerHTML += ++line + ": " + msg + "<br>";
	}
</script>
</head>
<body onload="load()" style="background-color:black; color:white">
	<div id="log"> </div>
</body>
</html>
Navigation