web-dev-qa-db-ja.com

サファリのJavaScriptをクリップボードにコピー？

質問が重複している可能性がありますが、これに対する解決策が見つかりませんでした。

ボタンをクリックしたときにテキストをコピーしようとしています。 chrome、mozilla（windowsとmacでは動作しますが、linuxでは動作しません）で動作します。そして、それはサファリに取り組んでいません。

コピーにdocument.execCommand("copy")コマンドを使用しています。

Safariはこのコマンドをサポートしていますか？

すべてのブラウザをサポートする方法はありますか？

javascriptjquerygoogle-chromefirefoxsafari
13
Akshay Deshmukh

私の解決策を確認してください。

Safari（iPhone 7およびiPadでテスト済み）および他のブラウザーで動作します。

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    function selectText() {
        var range,
            selection;

        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    function copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://Gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aahttps://fiddle.jshell.net/k9ejqmqt/1/

お役に立てば幸いです。

よろしく。

14
Rodrigo

IPhone 10 Safariでは最初の答えがうまくいかないので、他の解決策を見つけようとしましたが、説明されているものを見つけました here

基本的には、非常によく似たソリューションですが、構文は異なります。

「IE 10 +、Chrome 43 +、Firefox 41 +、Opera 29+ "」でサポートされています。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();
});
body {
  padding: 10px;
}
<p>Email me at <a class="js-emaillink" href="mailto:[email protected]">[email protected]</a></p>

<p><button class="js-emailcopybtn">Copy Email</button></p>

clipboardjs と呼ばれるlibについても言及しています。

私の場合、この単純なjsコードは次のように機能します。

  • iPhone 10 Safari
  • クロム（Android/pc（67.0.3396.79））
  • オペラ（pc（53.0.2907.68））

残念ながらそれは動作しません：

  • pc/Android Firefox（60.0.1（64ビット））

Firefoxの場合、単純な選択とコピーでうまくいきます。

element.select();
document.execCommand('copy');
1
StMa

Safariの場合、document.execCommand（）が機能する前にテキストを選択する必要があることがわかりました。

また、addRange（）は他のブラウザーではサポートされていません（ Chromeでは非推奨 ）。これは、選択範囲と範囲を適切にマージしないインスタンスがあることを意味します。これがユーザーエクスペリエンスにとって意味することは、ユーザーがSafariで2回クリックして値をコピーする必要があるということです。範囲を追加する前に.removeAllRanges（）を追加すると、コピーの正しい選択を確実に取得できます。それでも2番目の.removeAllRanges（）が必要かどうかは不明ですが、安全を確保しました。

 copy(id) {
    var configId = document.querySelector(id);
    var range = document.createRange();
    range.selectNode(configId);
    var selection = window.getSelection()
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    selection.removeAllRanges();
  }

（同じクラス内で）使用するには：

<Button icon="copy" onClick={() => {this.copy(id)}}/>

idは任意のhtmlセレクタにすることができます

これはChromeおよびSafariで機能しました。

1
Diana Nguyen

CanIUseによると、おそらくセキュリティ上の理由により、iOS上のSafariはdocument.execCommand（ 'copy'）をサポートしていません。

0
Mahi