Skip to content

Implement keyboard.show for html5 #1537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RblSb wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implement keyboard.show for html5 #1537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab75574
Implement keyboard.show for html5
RblSb Jul 26, 2026
714edc9
Don't fire bg/fg events on input focus
RblSb Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 37 additions & 156 deletions Backends/HTML5/kha/SystemImpl.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import js.html.ClipboardEvent;
import js.html.DeviceMotionEvent;
import js.html.DeviceOrientationEvent;
import js.html.DragEvent;
import js.html.FocusEvent;
import js.html.KeyboardEvent;
import js.html.MouseEvent;
import js.html.PointerEvent;
Expand All @@ -20,7 +21,9 @@ import kha.graphics4.TextureFormat;
import kha.input.Gamepad;
import kha.input.KeyCode;
import kha.input.Keyboard;
import kha.input.KeyboardImpl;
import kha.input.Mouse;
import kha.input.MouseImpl;
import kha.input.Sensor;
import kha.input.Surface;
import kha.js.AudioElementAudio;
Expand Down Expand Up @@ -215,7 +218,8 @@ class SystemImpl {
}

public static function vibrate(ms: Int): Void {
if (Browser.navigator.vibrate == null) return;
if (Browser.navigator.vibrate == null)
return;
Browser.navigator.vibrate(ms);
}

Expand Down Expand Up @@ -247,9 +251,9 @@ class SystemImpl {

static function init2(defaultWidth: Int, defaultHeight: Int, ?backbufferFormat: TextureFormat) {
#if !kha_no_keyboard
keyboard = new Keyboard();
keyboard = new KeyboardImpl();
#end
mouse = new kha.input.MouseImpl();
mouse = new MouseImpl();
surface = new Surface();
gamepads = new Array<Gamepad>();
gamepadStates = new Array<GamepadStates>();
Expand Down Expand Up @@ -494,7 +498,6 @@ class SystemImpl {
if (keyboard != null) {
canvas.onkeydown = keyDown;
canvas.onkeyup = keyUp;
canvas.onkeypress = keyPress;
}
canvas.onblur = onBlur;
canvas.onfocus = onFocus;
Expand Down Expand Up @@ -669,7 +672,7 @@ class SystemImpl {
static var iosSoundEnabled: Bool = false;

static function unlockiOSSound(): Void {
if (!ios || iosSoundEnabled)
if (!ios || iosSoundEnabled || MobileWebAudio._context == null)
return;

var buffer = MobileWebAudio._context.createBuffer(1, 1, 22050);
Expand Down Expand Up @@ -929,6 +932,8 @@ class SystemImpl {
var id = touch.identifier;
if (ios) {
id = iosTouchs.indexOf(id);
if (id == -1)
continue;
iosTouchs[id] = -1;
}

Expand Down Expand Up @@ -974,156 +979,38 @@ class SystemImpl {

for (touch in event.changedTouches) {
var id = touch.identifier;
if (ios)
if (ios) {
id = iosTouchs.indexOf(id);
if (id == -1)
continue;
iosTouchs[id] = -1;
}

setTouchXY(touch);
if (!Surface.listenedEventsBefore) {
mouse.sendUpEvent(0, 0, touchX, touchY);
}
surface.sendTouchEndEvent(id, touchX, touchY);
}
iosTouchs = [];
insideInputEvent = false;
}

static function onBlur() {
static function onBlur(event: FocusEvent) {
final input = KeyboardImpl.input;
if (input != null && event.relatedTarget == input)
return;
// System.pause();
System.background();
}

static function onFocus() {
static function onFocus(event: FocusEvent) {
final input = KeyboardImpl.input;
if (input != null && event.relatedTarget == input)
return;
// System.resume();
System.foreground();
}

static function keycodeToChar(key: String, keycode: Int, shift: Bool): String {
if (key != null) {
if (key.length == 1)
return key;
switch (key) {
case "Add":
return "+";
case "Subtract":
return "-";
case "Multiply":
return "*";
case "Divide":
return "/";
}
}
switch (keycode) {
case 187:
if (shift)
return "*";
else
return "+";
case 188:
if (shift)
return ";";
else
return ",";
case 189:
if (shift)
return "_";
else
return "-";
case 190:
if (shift)
return ":";
else
return ".";
case 191:
if (shift)
return "'";
else
return "#";
case 226:
if (shift)
return ">";
else
return "<";
case 106:
return "*";
case 107:
return "+";
case 109:
return "-";
case 111:
return "/";
case 49:
if (shift)
return "!";
else
return "1";
case 50:
if (shift)
return "\"";
else
return "2";
case 51:
if (shift)
return "§";
else
return "3";
case 52:
if (shift)
return "$";
else
return "4";
case 53:
if (shift)
return "%";
else
return "5";
case 54:
if (shift)
return "&";
else
return "6";
case 55:
if (shift)
return "/";
else
return "7";
case 56:
if (shift)
return "(";
else
return "8";
case 57:
if (shift)
return ")";
else
return "9";
case 48:
if (shift)
return "=";
else
return "0";
case 219:
if (shift)
return "?";
else
return "ß";
case 212:
if (shift)
return "`";
else
return "´";
}
if (keycode >= 96 && keycode <= 105) { // num block
return String.fromCharCode("0".code - 96 + keycode);
}
if (keycode >= "A".code && keycode <= "Z".code) {
if (shift)
return String.fromCharCode(keycode);
else
return String.fromCharCode(keycode - "A".code + "a".code);
}
return String.fromCharCode(keycode);
}

static function keyDown(event: KeyboardEvent): Void {
insideInputEvent = true;
activeKeyEvent = event;
Expand All @@ -1135,10 +1022,17 @@ class SystemImpl {
// prevent key repeat
if (event.repeat) {
event.preventDefault();
activeKeyEvent = null;
insideInputEvent = false;
return;
}
var keyCode = fixedKeyCode(event);
final keyCode = fixedKeyCode(event);
keyboard.sendDownEvent(keyCode);

if (event.key.length == 1) {
keyboard.sendPressEvent(event.key);
}

activeKeyEvent = null;
insideInputEvent = false;
}
Expand Down Expand Up @@ -1168,24 +1062,26 @@ class SystemImpl {
}

static function defaultKeyBlock(e: KeyboardEvent): Void {
final keyCode: KeyCode = cast e.keyCode;
// block if ctrl key pressed
if (e.ctrlKey || e.metaKey) {
// except for cut-copy-paste
if (e.keyCode == 67 || e.keyCode == 88 || e.keyCode == 86) {
if (keyCode == C || keyCode == X || keyCode == V) {
return;
}
// and quit on macOS
if (e.metaKey && e.keyCode == 81) {
if (e.metaKey && keyCode == Q) {
return;
}
e.preventDefault();
return;
}

// allow F-keys
if (e.keyCode >= 112 && e.keyCode <= 123)
if (e.keyCode >= F1.toInt() && e.keyCode <= F12.toInt())
return;
// allow char keys
if (e.key == null || e.key.length == 1)
if (e.key.length == 1)
return;
e.preventDefault();
}
Expand All @@ -1205,21 +1101,6 @@ class SystemImpl {
insideInputEvent = false;
}

static function keyPress(event: KeyboardEvent): Void {
insideInputEvent = true;
activeKeyEvent = event;
unlockSound();

if (event.which == 0)
return; // for Firefox and Safari
preventDefaultKeyBehavior(event);
event.stopPropagation();
keyboard.sendPressEvent(String.fromCharCode(event.which));

activeKeyEvent = null;
insideInputEvent = false;
}

public static function canSwitchFullscreen(): Bool {
return Syntax.code("'fullscreenElement ' in document ||
'mozFullScreenElement' in document ||
Expand Down
Loading
Loading