@ledsun blog

無味の味は佳境に入らざればすなわち知れず

Clipboard Events APIではpreventDefaultを呼ぶ必要がある

https://w3c.github.io/clipboard-apis/#override-copy

To override the default copy event behavior, a copy event handler must be added and this event handler must call preventDefault() to cancel the event.

window.addEventListener('copy', (e) => {
  e.clipboardData.setData('text/plain', 'ABC');
  e.preventDefault();
})

だと動きます。 どんな文字を選択してコピーしても常にABCがsystem clipboardに格納されます。

window.addEventListener('copy', (e) => {
  e.clipboardData.setData('text/plain', 'ABC');
})

とすると何も起きません。 また、e.clipbordDataは空です。 今からコピーされるであろう文字列とかは取れません。

このAPIを使ったら「選択した文字列を2倍にしてクリップボードに格納する」みたいないたずらが簡単にできるかな?と期待してたのですが、違うようです。選択中の文字列は自分でSelection - Web APIs | MDNを使って取得します。

カットする場合はもっと面倒臭くて、自分で文字列を編集して選択箇所を抜き取らなくてはいけません。