コピー/貼テキストのクリップボードとFireFox、Safari、Chrome

https://stackoverflow.com/questions/127040

02-07-2019
|

質問

Internet Explorerを利用できまclipboardDataオブジェクトへのアクセスクリップボードへ格納します。する方法を教えてくださいが、FireFox、Safariおよび/またはクローム?

解決

あり方は簡単なことで最も近代的なブラウザを利用

document.execCommand('copy');

このコピーを現在選択されています。を選択することができtextAreaは入力フィールドを使用

document.getElementById('myText').select();

へえ文字データをコピーまで迅速に生成することができるので、textAreaを変更するか、テキストボックスを選択し、コピー、削除のtextArea.ほとんどのケースにおいて、このtextAreaの見でflashの画面になります。

セキュリティ上の理由により、ブラウザでの閲覧のみを許可すれば、ユーザが何らかのアクション(ie.ボタンのクリック).これを追加するonClickイベントにhtmlエンターテインメントの通話方法をコピーします。

例のようになり

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>

他のヒント

セキュリティ上の理由により、Firefoxいすることができテキストのクリップボードへ格納します。しかし、仕事と周辺を利用できます。

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

お湯が潤沢に出るのはここにFlashが必要ですが有効になっているはずです。

ソースは、現在、ナノハイブリッド http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (でん Googleのキャッシュ)

オンラインスプレッドシートフックをCtrl+C、Ctrl+Vのイベントや移転に焦点を隠しTextArea制御のいずれかの設定内容をご希望の新クリップボードコンテンツをコピーまたは読み、その後の内容のイベントが最後になります。

参照することができるので、クリップボードには、Firefox、Safari、Chromeブ?

では2015年夏には、混乱の周辺のFlashうと思って新しく答えることを避け、その使用。

clipboard.js 素敵な光できるコピーのテキストまたはhtmlへのデータクリップボードへ格納します。で非常に使いやすい、など。jsを使うようになります:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js も GitHub

2017年にこれまでに(こう言ってもこのスレッドはほとんど9歳!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

現在のコピー copyStringToClipboard('Hello World')

お気付きだとは思いますが、 setData ラインは、どうなっているのだろう設定できます異なるデータ型があるといわれています。

Firefoxはできる店舗データのクリップボードがセキュリティの意味では無効になってデフォルトです。かすことができるようにするには "付与JavaScriptへのアクセスクリップボード" のMozilla Firefox知識ベース。

を提供したソリューションによるamdfanは最高の場合のユーザーの設定ブラウザなオプションになります。ができ試験場合にクリップボードには、リンクの設定はご遠慮くださいため、設定を変更する場合、ユーザーテクノロジーに疎.JavaScriptエディタ TinyMCE おります。

のcopyIntoClipboard()関数の動作Flash9で示すことにより、このリリースのFlash player10.こうソリューションは最新のflashプレイヤー:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

この複合体の溶液になる。

なければいけないなこれらのソリューション 本当に ます。しかし、クリップボードからソリューション受け入れの答えは、動作しないFlash Player10.またZeroClipboard、とても嬉しかったので少し.

私は現在使用してくれる人はいなくて、自分でサイトhttp://www.blogtrog.comがんに気づかのバグです。のZeroClipboard作品が入れるように見えないflashオブジェクトの先頭の要素にしてみましょう。いう場合素子の動きなど、ユーザがサイズを画面いものを右揃えにZeroClipboard flashオブジェクトのwhackなくなったのオブジェクトです。疑いはあるんじゃないでしょうかまだ座っていた。いコードをどうぞ停止、またはrestickの要素が見られるとは思えません。

なので---の次のバージョンのBlogTrogないといけないと思い、まだすべてのコードhighlightersんの野を削除したクリップボードにコピーボタンを押します。:-(

(いdp.syntaxhiglighterのコピーをクリップボードが壊れて現在もございます)

この方法とを義務付けられているのですがなかなかこの答えでもどこでも---

チェックリスト

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

のように誰でも、セキュリティ上の理由によりデフォルトでは無効になります。は、上記リンクを表示しないようなすことができるようにする（編集about:config"とfirefoxのuser.js).

幸いにあり、プラグインという"AllowClipboardHelperそんな、こじはるのかわいくていやだけます。しかしまだ必要な指導のウェブサイトの訪問者を有効にする方法については、アクセスに達しています。

に使用しましたのGithub Clippy というよりは、フラッシュに基づくボタンを押します。作品は、イブレア城、イブレアる場合にはその必要がないスタイリングとは喜ば挿入 何を貼り付け サーバー側できます。

利用の現代の書きします。execCommand("コピー") とjQuery. このstackoverflowの回答

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

電話のかけ方

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

若干の改善にフラッシュの値段が高くなりますが、検出フラッシュ10を使用swfobject:

http://code.google.com/p/swfobject/

その場合でflash10、負荷に与えた衝撃は大きオブジェクトにjavascriptを使用しております。Shockwaveで読み書きのクリップボードに全てのバージョン)などにcopyToClipboard()コマンドのlingoスクリプト.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp 作品のフラッシュ10びFlashを有効にするものではありません。

もZeroClipboard更新されていなバグを修正について記載してページのスクロールがフラッシュの映画についての正しい場所です。

この方法""が必要で、ユーザがクリックするためのボタンをコピーこの利便性を高めるために、ユーザーにもnefarious起こっていることがわかります。

を支持する場合にはそのflashを使用でき https://everyplay.com/assets/clipboard.swf のflashvarsテキストテキストの設定に

https://everyplay.com/assets/clipboard.swf?text=It%20Works

私の使っているコピーできるセットとして追加の場合に対応しておりませんこれらのオプションを使用でき

Internet Explorerの場合: ウインドウです。clipboardData.setData(DataFormat、テキストやウインドウです。clipboardData.getData(DataFormat)

で利用できますDataFormatのテキストやUrlをgetDataとsetData.

およびデータの削除:

で利用できますDataFormatのファイル、HTML、画像、テキストやURL。PS:を使用する必要があります。clipboardData.clearData(DataFormat);

その他の私がサポートしないウインドウです。clipboardData、swf flashファイルも利用できる制御+cボタンのキーボードのためには、windows、mac、そのコマンド+c

からアドオンコード：

場合には誰もしたんからのクロムコードを使用できますnsIClipboardHelper大規模シミュレーションを行い、ここで記載している: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

使用 document.execCommand('copy').対応して、最新のバージョン Chrome, Firefox, Edge, は、 Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

して新しいアカウントを作成メモリのグローバル変数の格納に選定、その他の機能にアクセスできる変数とな貼り付け例えば..

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

クリップボードAPI は優先 document.execCommand.サファリは必ずしも一致するものではないの支援だけを提供する必要があり、フォールバックまで仕様が確定、サファリ仕上げます。

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

セキュリティ上の理由によりクリップボード Permissions 必要なの読み書きからのクリップボードへ格納します。場合にスニペットなのであるフットサル localhost 又はその信頼される領域です。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow