10

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.

  • Are you looking to just copy the alt text? Or HTML that contains the image and some sort of caption with it? – Brad Jul 28 '12 at 02:56
  • Just to copy the alt text when someone highlights the image and copies it would be great. –  Jul 28 '12 at 02:58
  • Normally no images get copied on pressing cttl + c when hovered on a image. So what you means by highlighted? – McLosys Creative Jul 28 '12 at 03:20
  • I think only IE supports `oncopy` for images and you'd probably need flash for the copying to clipboard part – Musa Jul 28 '12 at 03:25
  • @McLosysCreative Hightlight as in clicking down and dragging over it, the way you would copy text. –  Jul 28 '12 at 12:26
  • @Musa Well, in that case probably isn't even worth trying to put it in. –  Jul 28 '12 at 12:27

4 Answers4

3

add attribute alt="text" to your image

example:

<img alt="" src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f1eb-1f1f7.png">
pazzazzo
  • 84
  • 3
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>
dx_over_dt
  • 13,240
  • 17
  • 54
  • 102
0

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.

Yatrix
  • 13,361
  • 16
  • 48
  • 78
0

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

Community
  • 1
  • 1
Dan F
  • 11,958
  • 3
  • 48
  • 72
  • 1
    Thank you. I'll consider this as an option, but at this point it looks like I probably will just give up. –  Jul 28 '12 at 12:32