web-dev-qa-db-ja.com

開発者コンソールから `document.execCommand（ 'copy'）;`を使用できません

Chrome開発者コンソールから document.execCommand（ 'copy'）; を呼び出すと、毎回falseが返されます。

自分で試してみてください。コンソールを開いて実行すると、成功しません。

理由についての考えはありますか？

enter image description here

javascriptgoogle-chromedomdocumentexeccommand
22
Domi

document.execCommand('copy')はユーザーがトリガーする必要があります。コンソールからだけでなく、ユーザーによってトリガーされたイベント内ではない場所にあります。以下を参照してください。クリックイベントはtrueを返しますが、イベントのない呼び出しは返されず、ディスパッチされたイベントの呼び出しも返されません。

console.log('no event', document.execCommand('bold'));

document.getElementById('test').addEventListener('click', function(){
    console.log('user click', document.execCommand('copy'));
});

document.getElementById('test').addEventListener('fakeclick', function(){
    console.log('fake click', document.execCommand('copy'));
});


var event = new Event('fakeclick')

document.getElementById('test').dispatchEvent(event) ;
<div id="test">click</ha>

こちらをご覧ください： https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

Document.execCommand（）からトリガーされるコピーコマンドは、ユーザーが信頼してトリガーするイベントからイベントがディスパッチされる場合、または実装がこれを許可するように構成されている場合にのみ、実際のクリップボードの内容に影響します。クリップボードへの書き込みアクセスを許可するための実装の構成方法は、この仕様の範囲外です。

39
Julien Grégoire

別の方法として、Chrome Devツールに組み込まれている copy() コマンドを使用します。document.execCommand("copy")は使用できません。トリガーするにはユーザーアクションが必要だからです。

copy() コマンドを使用すると、任意の文字列（またはオブジェクトをJSONとして）をコピーできます。 document.execCommand("copy")をエミュレートするには、getSelection().toString()で現在の選択を取得できます。

copy(getSelection().toString())

screen shot

document.execCommand("copy")を実際にテストする必要がある場合（たとえば、それを使用するスクリプトをデバッグするため）、デバッガーの使用が何らかの理由で理想的でない場合は、クリックハンドラーでコードをラップしてから、ページをクリックします。

document.body.addEventListener("click", function() {
    console.log("copy", document.execCommand("copy"));
}, false);
6
gilly3

copyコマンドはブラウザにフォーカスする必要があり、コンソールに移動してコマンドを実行すると、現在のウィンドウはフォーカスを失います。しかし、setTimeout()を指定すると機能するため、他の理由も考えられます。

2
Praveen Kumar Purushothaman

この方法はサファリの最新バージョンで動作します

const copyUrl = (url, cb) => {
  try {
    var input = document.getElementById('copyInput')
    input.value = url
    input.focus()
    input.select()
    if (document.execCommand('copy', false, null)) {
      Message('复制成功')
    } else {
      Message({
        message: '当前浏览器不支持复制操作，请使用Ctrl+c手动复制',
        type: 'warning'
      })
    }
  } catch (e) {
    Message({
      message: `复制出错：${e}`,
      type: 'error'
    })
  }
}
0
div-wang