How to paste the clipboard content automatically in my webpage

Question

I would like to have the clipboard content of the client pasted automatically into a textarea the moment he opens the URL.

I couldn't even manage to do it onclick and have searched everywhere with no result. This is one of the versions I tried:

<!DOCTYPE html>
<html>
    <body>

        <input type="textarea" id="demotext" value=" " size="40" />
        <button onclick="PasteFunction()">Paste text</button>

        <script>
function PasteFunction() {
  document.getElementById("demotext").innerHTML=window.clipboardData.getData('Text');
}
        </script>

    </body>
</html>

It is probably better if you know the full description of my end goal and can suggest a smarter alternative:

I want to connect the Excel data from the client to my web application without requiring the user to manually paste the data. My web application is triggered when the clipboard content is manually pasted into my textarea.

An Excel add-in can guide the user to manually copy his data and access an URL to my web application, that part is fine. Once he is there, the data would be automatically pasted and the web application would start. In case there is a much easier solution using the server side, I can consider and I am using Flask, but I would prefer not to bring the user data to the server.

I had this issue for images, so made this script, that works with any content on clipboard: text, images, pdf, etc. [ ClipBoardJS on GitHUB ](https://github.com/ruicaramalho/ClipBoardJS) — Rui Caramalho, May 29 '23 at 17:55

score 1 · Answer 1 · answered Aug 02 '19 at 08:52

1

You can use the Clipboard API

Instead of creating a Clipboard object through instantiation, you access the system clipboard through the Navigator.clipboard global:

navigator.clipboard.readText().then(
    clipText => document.querySelector(".editor").innerText += clipText);

answered Aug 02 '19 at 08:52

Emad Dehnavi

3,262
4
19
44

without user permission, reading or altering the clipboard contents is not permitted. – roetnig Aug 02 '19 at 09:00
1

Yup, that's right, I linked to API docs which mentioned this and other details needed for developers, before develop anything always should read the docs. – Emad Dehnavi Aug 02 '19 at 13:17

score 1 · Answer 2 · answered Aug 02 '19 at 09:02

1

You can try that

async function PasteFunction() {
  const text = await navigator.clipboard.readText();
  document.getElementById("demotext").value = text;
}

But ... just working in Chrome 66 or later and need user permission .

answered Aug 02 '19 at 09:02

Yuxino

75
1
2
8

How to paste the clipboard content automatically in my webpage

2 Answers2