web-dev-qa-db-ja.com

フラッシュを使用せずに、選択したテキストをクリップボードにコピー-クロスブラウザである必要があります

textareaのテキストを選択してクリップボードにコピーするボタンが必要です。すべてのブラウザで動作し、フラッシュを使用しないソリューションは見つかりません。

確かにこれは実行可能ですか？私はあちこちでそれを見てきましたが、彼らはフラッシュを使用していると思います。

これは私がこれまで持っているものです-それは単にテキストを選択します：

function copyCode() {
  $("#output-code").focus();
  $("#output-code").select();
}

（フォーカスは厳密には必要ありません）

javascriptjquerycopyclipboard
53
Nick Brunt

execCommand（ 'copy'）

非常に新しいオプションがあります。これはクロスブラウザですが、誰もがブラウザを更新するまで時間がかかります。

document.execCommand('copy');関数を使用して機能します。この関数を使用すると、選択したテキストをコピーします。これはtextareasだけでなく、Webページ上の選択されたすべてのテキスト（span、p、divなど）でも機能します。

Internet Explorer 10以降で利用可能、Chrome 43 +、Opera 29+およびFirefox 41+（execCommand互換性を参照 ここを参照 ）。

例

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});
<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
62
arcs

クライアントのクリップボードにテキストを自動的にコピーするには、使用しないFlashアドインを使用する必要があります。 active-xコンポーネントを使用せずにクライアントのクリップボードを自動的に変更するWebサイトは、セキュリティ上の問題です。 active-xコンポーネントは、ユーザーのマシンで実行されるプログラムであり、技術的にはインストールするユーザーの同意が必要なことに注意してください。クリップボードはオペレーティングシステムのコンポーネントであることを考慮すると、WebブラウザーがデフォルトでWebサイトによるハイジャックを許可しないことに満足してください。

ユーザーがFlashを使用していない、Flashを無効にしている、またはactive-xを無効にしている場合、ユーザーはおそらくセキュリティについて妄想的であり、とにかくキーボードをいじりたくないでしょう。その時点で、ユーザーはWebサイトで自動またはスクリプトベースの機能をあまり使用しないことに慣れています。エンドユーザーの希望を公然と無視しようとしないことが最善です。

次のスタックオーバーフローリンクを参照してください。

  1. JavaScriptでクリップボードにコピーする方法
  2. Javascriptでのクロスブラウザフラッシュ検出

究極の答えは、Zero Clipboardを使用することです。ZeroClipboardは、小さく見えないFlashムービーとJavaScriptを使用して、必要なクリップボード機能を使用するライブラリです。ライブラリはこちらから入手できます。 https://github.com/zeroclipboard/zeroclipboard 2番目のリンクは、Flashが無効になっているかインストールされていないかを検出する方法を示し、警告メッセージを表示できます。 JavaScript用。

18
Devin Burke

これで、 Clipboard.js by @zenorocha

使用するには、page.htmlでスクリプトをダウンロードして呼び出します（またはbowerまたはnpmでインストールします）

<script src="path_to_script/clipboard.min.js"></script>

Script.jsで新しいトリガーをインスタンス化します

new Clipboard('.trigger');

そして、使用方法の例を参照してください： http://zenorocha.github.io/clipboard.js/#usage

9
Gabriel Gularte
function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

これがお役に立てば幸いです

7
Iyappan

これはかなり遅い応答ですが、将来検索し、デスクトップデバイスとモバイルデバイスの両方で動作するexecCommand（ 'copy'）イベントの実装に問題がある場合に役立ちます。

クロスブラウザ、モバイルフレンドリー、外部ソースやプログラムは不要

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

CopyString（）関数を、イベントを発生させたいもののクリックイベントに設定します。これは、モバイルとデスクトップの両方のオペレーティングシステムで使用できます。

説明

コピーする文字列を選択するには、2つの異なる方法が必要です。今日のように、デスクトップ経由で行う方法はモバイルデバイスでは機能しないためです。デスクトップメソッドが機能したかどうかをキャッチし、機能しない場合はモバイルデバイスで機能するコードを起動するif then関数があります。この方法では、ダウンロードやリンクは不要です。どちらの方法も、コピーしようとしているテキストを強調表示してから、クリップボードにコピーコマンドを実行し、コピーしようとしている文字列の選択を解除します。好みに合わせてコードを混在させることができますが、これはそうする方法です。

1
MattOlivos