9

私は Web ページを作成していて、できると便利なことに出くわしました。誰かが画像をコピーしようとしたときにテキストをクリップボードにコピーするように設定します。おそらく代替テキストと同じです。これを行うことができる 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

私はあなたができるとは思わない。ブラウザーを介してキーボード イベントをフックできるとしたら、それは重大なセキュリティ上の問題になります。数行のコードでキーストロークをキャプチャして Web サービスに送信できますが、これでは簡単に命を落とすことになります。

onmousedown を使用して何らかの方法でマウス ダウン イベントを検出し、その代替テキストを非表示フィールドまたは Cookie に保存して、そこから検出できる場合がDoSomething()あります。

于 2012-07-28T03:23:14.800 に答える
0

tyntなどのサービスがこのようなことをしているのを見てきました。2065880 Javascript: ハイジャック コピー? 1203082 コンテンツが Web ページからコピーされたときにテキストを挿入する方法について説明します。

于 2012-07-28T03:56:32.100 に答える