Question

我正在构建一个网页，并且遇到了一些能够做到的事情;当有人试图复制图像时，将文本设置为复制到剪贴板，可能与alt文本相同。用javascript / html有什么方法可以做到这一点吗？如果是，请解释。

感谢您的帮助！

编辑：基本上，我想让我的用户突出显示图像，按control-c，然后将alt文本存储在剪贴板中。

Answer 1

我认为你不能。如果您可以通过浏览器挂钩键盘事件，那将是一个巨大的安全问题。您可以捕获击键并使用几行代码将它们发送到Web服务，这很容易破坏一些生活。

您可以使用onmousedown通过以某种方式将其附加到图像来检测鼠标按下事件，并将该alt文本存储在隐藏字段或cookie中，并从那里存储DoSomething()。

Answer 2

我见过像tynt这样的服务做这样的事情。 2065880 Javascript: Hijack Copy?讨论了这些技巧，1203082 Injecting text when content is copied from Web Page

也是如此

Answer 3

这是可能的，因为Twitch.tv在聊天中复制表情图像时会这样做。诀窍是使用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>

如何在复制图像时将文本设置为复制到剪贴板？

3 个答案: