@ledsun blog

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

Clipboard

カット対象要素をマーキングするタイプのカットアンドペーストで、続行不能になったときのマーキング解除タイミング

複数エディタ間でのコピーアンドペーストを実現するためにシステムクリップボードを使っています。 カットアンドペーストも出来るようにしたいです。 ただし、このカットはテキストエディタとはちがい、カット操作したときはカットは行わずにマーキングだけ…

contenteditableでない要素をフォーカスしたときのcutイベントのターゲット

developer.mozilla.org にあるように、cutイベントはほとんどのブラウザで使えます。 しかし、次のようにHTML要素にイベントリスナーを設定すると、イベントリスナーが実行されないことがあります。 editorHTMLElement.addEventListener('cut', (event) => c…

FirefoxでAsynchronous Clipboard APIのwrite, read, readText関数を使う方法

Firefox 95.0でAsynchronous Clipboard APIのwrite, read, readText関数を使うには以下の設定が必要です。 高度な設定 Firefoxのアドレスバーにabout:configと打ち込むと、高度な設定が出来ます。 Firefoxのアドレスバーにabout:configを入力して高度な設定…

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) …

clipboardchangeイベントは実装されていない

Clipboard API and events を読んでいたらclipboardchangeイベントというsyustem clipboardに変化があったら発火する、便利そうなイベントがありました。 次のようなコードを試してみました。 window.addEventListener('clipboardchange', () => { console.l…

FirefoxではAsynchronous Clipboard APIを使ってもクリップボードから読み込めない

Clipboard API and events を読みました。 Asynchronous Clipboard APIを使ったサンプルをCodepenで作りました。 Google Chromeだと、全部動きます。 FirefoxだとwriteTextしか動きません。writeはwriteで書き込むためのClipbordItemがサポートされていない…