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

clipboard api example
javascript copy image to clipboard
copy to clipboard
react-copy image to clipboard
javascript copy to clipboard
google apps script copy to clipboard
navigator.clipboard.readtext is not a function
copy to clipboard web api

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.

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>

javascript, 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� In this tutorial, we will first create an HTML textarea with some text inside it. After that, we are going to create a button. When we click the button, the text content of textarea will be copied into clipboard and if we can paste it anywhere we like. Now I am going to show you the code. Below is the HTML code of text area and a button:

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.

Copying Text From Images to Your Clipboard, Step 1: Install Tesseract Via Homebrew. Open Terminal, and install Tesseract via Homebrew: brew install tesseract. Step 2: Create a Service With Automator. Open Automator and create a new service with the “Run Shell Script” action. Step 3: Set Up a Keyboard Shortcut. Open the Office Clipboard task pane To open the Clipboard task pane, click Home, and then click the Clipboard dialog box launcher. Double-click the image or text you want to paste. Note: To open the Clipboard task pane in Outlook, in an open message, click the Message tab, and then click the Clipboard dialog box launcher in the Clipboard group.

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

Clipboard API and events, Metadata When copying text from a repository of documents, it can be useful for permission or transcoding a image) are not supported by these APIs. but we can set it to the // data that we want copied onto the clipboard. e. Dim data As New DataObject() data.SetData(DataFormats.Bitmap, True, Me.pb1.Image) data.SetData(DataFormats.Text, True, "This image is a graph") Clipboard.SetDataObject(data, True) Dim bResult As Bitmap = Clipboard.GetData(DataFormats.Bitmap) Dim tResult As String = Clipboard.GetData(DataFormats.Text) As another test, put both the image and the text into Word, and copy them both.

Image support for the async clipboard API, The Asynchronous Clipboard API now handles some images, in addition to text. To copy text to the clipboard, call navigator.clipboard. a blob() method and XMLHTTPRequest() let's you set "blob" as the responseType . Select the text from the scanned images. Tap “ Copy Text ” to copy the scanned text to the clipboard on your iPhone. Google Lens on iPhone cannot send the copied text to your PC. However, in case you want to get the same text on your Mac, you can use the universal clipboard.

How to copy an image to clipboard on Android, How to copy-paste images using File Manager. Usually, you will face a problem trying to copy an image to the clipboard because unlike text, you� Copy to Clipboard 1. Select a page element to be copied (a text, a symbol, an image, a table etc.); 2. Click the button. The selected area will be placed into

Copy and paste using the Office Clipboard, The Clipboard task pane holds many of the last images and text you copied or cut . Note: You can still do simple cut, copy, and paste the way you're used to,� If you’re looking for something like Windows 10 clipboard history, but works locally, you can use Multiclip. It’s a free, open-source app that can copy multiple items to the clipboard. Like the Windows 10 feature, it can copy both text and images, and you can recall a complete list of everything you’ve copied.

Comments
  • Are you looking to just copy the alt text? Or HTML that contains the image and some sort of caption with it?
  • Just to copy the alt text when someone highlights the image and copies it would be great.
  • Normally no images get copied on pressing cttl + c when hovered on a image. So what you means by highlighted?
  • I think only IE supports oncopy for images and you'd probably need flash for the copying to clipboard part
  • @McLosysCreative Hightlight as in clicking down and dragging over it, the way you would copy text.
  • Okay, I'm not terribly surprised by that. Thanks!
  • Thank you. I'll consider this as an option, but at this point it looks like I probably will just give up.