How can I set text to be copied to clipboard when image is copied?

Question

I am building a web page and have run into something that would be nice to be able to do; set text to be copied to the clipboard when someone tries to copy an image, probably the same as the alt text. Is there any way with javascript/html that this can be done? If so, please explain.

Thanks for any help!

Edit: Basically, I want to let my users highlight the image, press control-c, and then have the alt text stored in their clipboard.

Guidotti

Are you looking to just copy the alt text? Or HTML that contains the image and some sort of caption with it? – Vernavernacular

Just to copy the alt text when someone highlights the image and copies it would be great. – Guidotti

Normally no images get copied on pressing cttl + c when hovered on a image. So what you means by highlighted? – Multiplicand

I think only IE supports oncopy for images and you'd probably need flash for the copying to clipboard part – Tester

@McLosysCreative Hightlight as in clicking down and dragging over it, the way you would copy text. – Guidotti

@Tester Well, in that case probably isn't even worth trying to put it in. – Guidotti

Answer 1

add attribute alt="text" to your image

example:

<img alt="🇫🇷" src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f1eb-1f1f7.png">

Echinate

Answer 2

This is possible as Twitch.tv does this when copying emote images in chat. The trick is to use the copy event.

const parent = document.getElementById('parent');
parent.addEventListener('copy', event => {
  let selection = document.getSelection(),
    range = selection.getRangeAt(0),
    contents = range.cloneContents(),
    copiedText = '';

  for (let node of contents.childNodes.values()) {
    if (node.nodeType === 3) {
      // text node
      copiedText += node.textContent;
    } else if (node.nodeType === 1 && node.nodeName === 'IMG') {
      copiedText += node.dataset.copyText;
    }
  }

  event.clipboardData.setData('text/plain', copiedText);
  event.preventDefault();
  console.log(`Text copied: '${copiedText}'`);
});

#parent {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex-grow: 0;
}

#parent,
#pasteHere {
  padding: 0.5rem;
  border: 1px solid black;
}

.icon {
  width: 32px;
}

#pasteHere {
  margin-top: 1rem;
  background: #E7E7E7;
}

<p>Copy the line below:</p>

<div id="parent">
  Some text <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e" class="icon" data-copy-text="foo" /> some more text <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e"
    class="icon" data-copy-text="bar" />
</div>

<div id="pasteHere" contenteditable>Paste here!</div>

Gastroenterostomy

Answer 3

I don't think you can. If you could hook keyboard events through the browser, that'd be a tremendous security issue. You could capture keystrokes and send them to a web service in a few lines of code, which would ruin some lives pretty easily.

You may be able to detect a mouse down event using onmousedown by attaching it to the image in some fashion and store that alt-text in a hidden field or cookie and DoSomething() from there.

Cantankerous

Okay, I'm not terribly surprised by that. Thanks! – Guidotti

Answer 4

I've seen services such as tynt do something like this. 2065880 Javascript: Hijack Copy? talks about the techniques, as does 1203082 Injecting text when content is copied from Web Page

Plume

Thank you. I'll consider this as an option, but at this point it looks like I probably will just give up. – Guidotti