I've done an HTML export with PICO-8 version 0.2.4c. Holding down Z, A, S, etc., produces the Mac accent character selector and steals input away from the left and right arrow keys.
On macOS version (12.3.1), tried it in Firefox (100.0) and Safari (15.4), in an iframe and not (just to be thorough lol), and all of them have the issue. However, I don't get this problem at all in PICO-8.app or on the BBS.
this is happening for me as well, which makes it difficult to hold down the jump key in a platformer I made -- if you hold down the jump key Z, intending to jump higher, you instead lose all control because the accent menu pops up and your arrow keys send their input to the accent menu, not pico8.
I did some digging around, curious to see why this is a problem for pico-8 web exports (but not, e.g. godot web exports). I opened an html file exported from pico8, ran the code, held the jump key, and the accent menu showed up. Then, I asked the browser inspector to tell me what document.activeElement
was, and it returned a textarea, which I then searched for and found in the html file:
< !-- used for clipboard access & keyboard input; displayed and used by PICO-8 only once needed. can be safely removed if clipboard / key presses not needed. --> < !-- (needs to be inside p8_playarea so that it still works under Chrome when fullscreened) --> < textarea id="codo_textarea" class="emscripten" style="position:absolute; left:-9999px; height:0px; overflow:hidden"></textarea> |
Luckily I can remove this in my game, but it's going to be a chore remembering to remove it in every game from now on (and what do I do for games where I can't do that?)
tl;dr: +1, this bug is no good. workaround: search for textarea id="codo_textarea"
in the outputted html and remove that entire line of html
That helps, thanks! Uh oh, for that project, I've considered using the clipboard to copy and paste in puzzle share codes... I haven't added that yet, though, so it's fine for now.
I've updated the html shell for exports in 0.2.5 -- it now hides codo_textarea by default (display:none) and then pico8.js activates it only when the cartridge is interacting with the clipboard. The BBS was updated to do this while improving clipboard support for https://www.pico-8-edu.com and the reason it currently works there but not in exports.
This doesn't help for cartridges that do interact with the clipboard though. I'm not sure if this is going to be solvable to have both -- supporting clipboard on the web requires some filthy hacks that are just asking for trouble:
Because PICO-8 doesn't (and can't) use standard clipboard semantics under the web, it instead communicates through a hidden text area (codo_textarea) by keeping its contents selected and in focus, so that when the user presses ctrl-v the pasted content can be read by pico8.js. To write to the host clipboard from web is even worse: when the user presses ctrl in the editors or in a running cartridge, PICO-8 preemptively writes whatever /might/ be copied to the textarea /just incase/ the user then follows with a keypress of c or x while still holding ctrl. This was the most cross-browser compatible method I could come up with, but I'm not sure how long it's going to last as browsers add more obscure rules over time.
It looks like there is no way around using this kind of method for now, so OS-level UI side-effects are likely going to be a problem until web Clipboard api support improves:
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
[Please log in to post a comment]