Skip to content
This repository has been archived by the owner on Feb 17, 2022. It is now read-only.

The oncopy, oncut, onpaste events don't occur #125

Open
PavelSha opened this issue May 25, 2020 · 7 comments
Open

The oncopy, oncut, onpaste events don't occur #125

PavelSha opened this issue May 25, 2020 · 7 comments

Comments

@PavelSha
Copy link

PavelSha commented May 25, 2020 •
edited
Loading

Hello.
I used the simple example: http://main.lv/writeup/web_assembly_sdl_example.md
Also, I added in index.html:

<html>
  ...
    <body>
      ...
      <script type='text/javascript'>
        document.addEventListener('keydown', function (e) {
          console.log(" ! keydown !");
        }, true);
        document.addEventListener('cut', function (e) {
          console.log(" ! cut !");
        }, true);
        document.addEventListener('copy', function (e) {
          console.log(" ! copy !");
        }, true);
        document.addEventListener('paste', function (e) {
          console.log(" ! paste !");
        }, true);
      </script>
    </body>
</html>

I used - "Press CTRL + X", "Press CTRL + C", "Press CTRL + V"
The event 'keydown' occurs. But the events 'copy', 'cut', 'paste' events don't occur.
I canceled this changes: 993758c. That helped me.
@ghost
Copy link

ghost commented Jun 22, 2020

It seems like this isn't implemented in src/video/emscripten. I don't see anywhere that the callback function for clipboard modification and access are being set.

@feliwir
Copy link
Contributor

feliwir commented Jul 13, 2020 •
edited
Loading

We encounter the same issue at work. It seems like the SDL2 keydown event is supressing the other events from being triggered (by calling preventDefault()). We solved this by overwriting the keydown/up/press event and checking if copy/paste is called. With the code below we could then register the copy, paste & cut event handlers and read & write from the clipboard.

var original_addEventListener = window.addEventListener;
      
window.addEventListener = function (type, handler, opts)
{
   if (type === "keyup" || type === "keydown" || type === "keypress")
   {
     original_addEventListener(type, function (e) {

       let key = e.which || e.keyCode;
       let ctrl = e.ctrlKey ? e.ctrlKey : ((key === 17) ? true : false);

       if (ctrl && (key == 86 || key == 67 || key == 88))
         return false;
            
       handler(e);

     }, opts);
   }
   else
   {
     original_addEventListener(type, handler, opts);
   }
};

window.addEventListener("paste", (event) => {
    event.preventDefault();
    let pastedText = (event.clipboardData || window.clipboardData).getData('text');
    alert(pastedText);
  }, true);

....

Issue with this is approach is that it doesn't work for all platforms (e.g. not the command key on macOS) and that it's super hacky to do that manually. A portable solution on the SDL2 port would be great.

@Daft-Freak
Copy link
Member

Hmm I accidentally broke this in 993758c, which was to fix stuff like Ctrl-R refreshing the page. Not sure how best to fix this...

If you don't need to paste onto the canvas, SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas") may be a workaround. (You can also turn off the event handler entirely with SDL_EventState(SDL_KEYDOWN, SDL_DISABLE)).

@feliwir
Copy link
Contributor

feliwir commented Jul 14, 2020 •
edited
Loading

@Daft-Freak
If i remember correctly copy & paste never worked for us the last couple of years.
Atleast when using SDL_SetClipboardText and SDL_GetClipboardText.
Or what would be the suggested method to deal with clipboard events from the C++ side?

We want to use the default SDL key event handling preferably. Maybe SDL_CLIPBOARDUPDATE could be used to forward the paste / copy events to SDL?

@Daft-Freak
Copy link
Member

Ah, yeah I haven't looked at implementing SDL's clipboard support. I think it may be a bit of an API mismatch...

@feliwir
Copy link
Contributor

feliwir commented Jul 14, 2020 •
edited
Loading

@Daft-Freak yeah i noticed that aswell. But why is it necessary that the keypress event handlers prevent the default behaviour, which causes the copy / cut / paste events not being called at all on the JavaScript part?

@Daft-Freak
Copy link
Member

Mainly for keys like backspace, where the default action is unexpected for the app. Also, consistency with the other event handlers.

(The keydown event is a bit special, most event handlers just return true (prevent default) if the event is enabled (SDL_EventState).)

@araghon007 araghon007 mentioned this issue Apr 5, 2023
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@feliwir @Daft-Freak @PavelSha