Angular: How to get copied URL from clipboard?

Question

So this is how I extract the copied text from clipboard:

const data = event.clipboardData.getData('text/html');

But this code does not work if I copied a URL. The data will be "" empty. Not sure why is it different with a normal text.

How do I get the copied URL?

EDIT

The event I got is from paste event:

paste(event: ClipboardEvent) {
  const data = event.clipboardData.getData('text/html');
}

From this HTML element (I am using Angular):

<div
    id="content"
    contentEditable="true"
    (paste)="paste($event)"
></div>

Đào Minh Hạt · Accepted Answer · 2023-02-07 02:46:47Z

2

Not sure what is the event in your code, but you can get data from clipboard anywhere in your browser via Clipboard API

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText

const copiedData = await navigator.clipboard.readText()

answered Feb 7, 2023 at 2:46

Đào Minh Hạt

2,93618 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alvin Stefanus Over a year ago

I am using Angular, the event is from paste event from a contenteditable div.

Dennis Quan · Accepted Answer · 2023-02-07 03:42:17Z

1

So from what I've read from this Codepen, the code takes the textContent from the quote blocks and then put them all in the clipboard

handleCopyClick.addEventListener('click', () => {
    let text = quoteText.textContent;
    let author = quoteAuthor.textContent;
    navigator.clipboard.writeText(`${text} ${author}`);
});

Adapting to your case though, the code would look something like this:

paste(event: ClipboardEvent) {
  let url = urlBlock.textContent;
  navigator['clipboard'].writeText(`${url}`)
}

Props to this FreeCodeCamp article for the inspiration. This one SO post might also answer some of your questions too.

answered Feb 7, 2023 at 3:42

Dennis Quan

1491 silver badge5 bronze badges

Comments

Alvin Stefanus · Accepted Answer · 2023-02-07 03:56:02Z

1

Actually I found that the clipboardData sometimes hold different types of string. In my code:

const data = event.clipboardData.getData('text/html');

This only extract text/html type.

There are other types like text/plain. So this is my solution:

let data = event.clipboardData.getData('text/html');
data = data && data.length > 0 ? data : event.clipboardData.getData('text/plain');

If text/html is empty, then get text/plain data.

answered Feb 7, 2023 at 3:56

Alvin Stefanus

2,1734 gold badges32 silver badges79 bronze badges

Collectives™ on Stack Overflow

Angular: How to get copied URL from clipboard?

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related