9

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

谢谢你的帮助！

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

4

3 回答 3

1

这是可能的，因为 Twitch.tv 在聊天中复制表情图像时会这样做。诀窍是使用copy事件。

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>

于 2019-04-08T18:44:19.347 回答
0

我见过像tynt这样的服务做这样的事情。2065880 Javascript：劫持副本？谈论这些技术，就像1203082 Injecting text when content is compatible from Web Page

于 2012-07-28T03:56:32.100 回答
0

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

您可以使用 onmousedown 检测鼠标按下事件，方法是将其以某种方式附加到图像上，并将替代文本存储在隐藏字段或 cookie 中，然后DoSomething()从那里存储。

于 2012-07-28T03:23:14.800 回答