Copy and pasting text
PepperBoi

Im trying to do a level creaator type of thing where you can create levels and copy the objects and and then you can comment on the itch.io pag and people can paste it into an area where it will clone them and you can play the level. Right now i am having a problem with how to copy text everything i searched for online used document.execCommand("copy"); but that didnt work.

All 4 Comments
Gio

Where is the text that you want to copy? Do you have a string that you just want to put it into the clipboard?

In that case, you have a couple of options. The simpler one (clipboard API) is not supported in all browsers, so you may want to use the more complex one. As you have found, document.execCommand('copy') is a well-supported solution. But there are a couple of caveats, most importantly: you can only do that in response to a user interaction, e.g. in an onClick or onMouseUp function.

There are several steps you need to do:

First you need to create a DOM element like a textarea or input. Then you put your text into it. Then you add the element to the DOM. Focus the element. Select the element. Copy to clipboard. Remove the element.

Easier than it sounds though:

myButton.onClick = function() {
    var text = 'Hello World';

    var textArea = document.createElement('textArea');
    textArea.value = text;    
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
};

 

 

PepperBoi

That works but how can you get whats in your clipdoard as a var(pasting).

Gio

Unfortunately you cannot easily do the same thing for pasting content from the clipboard into your web page.

This is a security measure. Understandably, the user might have stored some sensitive data in the clipboard. You don't want just any website being able to look at that data and potentially transmit it to an untrusted server.

So, unless the user pastes the data directly into your page with CTRL-V... if you want a button to do the pasting, you need to ask users for permissions to use their clipboard data.

While document.execCommand('paste') does exist, its usage in practice is restricted to browser extensions that have declared the appropriate permissions. On web pages, you cannot really use that.

There is an alternative, though it's not supported by all browsers (but most modern browsers are ok with it): first you can ask for permissions to access the clipboard using the Permissions API. Typically this pops up a dialog in the browser where you can accept or decline the permissions. Here's a good article on how to do that:

https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API

Once you have that bit, you can use the Clipboard API (again, only supported by modern browsers):

navigator.clipboard.readText().then(function(clipboardData) {
    // do something with clipboardData
});

If you don't want to use the Permissions API and Clipboard API, the only way is to ask the user to paste the contents of the clipboard with CTRL-V.

PepperBoi

I didnt end up adding this to the game but I hope this will be helpful to other people in the future.

This is the completed game on itch.io if you want to try it.

https://cjdgamedev.itch.io/movewithmoons

Post a reply
Add Attachment
Submit Reply
Login to Reply