6

ZeroClipboard API を機能させようとしていますが、setText() 関数は効果がないようです。

提供されている簡単な例 > here < 正常に動作しますが、プログラムで setText() を呼び出したい場合は動作しません。このコードの何が問題なのですか？

<html>
<body>
<script type="text/javascript" src="/resources/ZeroClipboard.js"></script>

<button id="my-button">Copy to Clipboard</button>

<script language="JavaScript">

    ZeroClipboard.setDefaults({ moviePath: "/resources/ZeroClipboard.swf" });

    var clip = new ZeroClipboard( $("button#my-button") );

    clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...

</script>
</body>
</html>

どうもありがとう

4

1 に答える 1

9

セキュリティ上の問題により、アクションが Flash オブジェクトのクリック (またはユーザー操作) から発生しない限り、Flash はクリップボードにアクセスできません。

このため、clip.setText を呼び出すだけでは機能しません。ランダム ボタンの onclick ハンドラから呼び出しても、 flash オブジェクトのクリックではないため、機能しません。

仕方ないよ。

したがって、ZeroClipboard が行うことは、関心のあるオブジェクトに「接着」または非表示のフラッシュ要素を追加することです。要素をクリックすると、その要素に対して通常の JavaScript onclick が発生するのではなく、フラッシュ ビデオの onclick イベントが発生します。

それが理にかなっていることを願っています。

したがって、ZeroClipboard を要素に「接着」するには、これまでと同じように行うことができます。これは正しい方法ですが、次のように呼び出すこともできます。

clip.glue(element);

複数の要素に問題なく接着できます。

したがって、テキストを設定するには、フラッシュ オブジェクトをクリックしてアクションを開始する必要があります。ドキュメントによると、これを行うには 3 つの方法があります。

data-clipboard-text の使用

ボタンの「data-clipboard-text」属性を好きなテキストに設定すると、これが自動的にコピーされます。

たとえば、あなたの例（「このテキストをコピーしてください！」をコピーします）：

<button id="my-button" data-clipboard-text="copy this text!">Copy to Clipboard</button>

data-clipboard-target の使用

または、「data-clipboard-target」を任意の要素の ID に設定すると、ZeroClipboard はその要素の innerText を取得しようとします。

例 (「クリップボードにコピー」をコピー)

<button id="my-button" data-clipboard-target="my-button">Copy to Clipboard</button>

dataRequested イベントの使用

最後に、コールバックでテキストをコピーできます。これらの属性のどちらも設定されていない場合、 dataRequested コールバックが呼び出され、テキストを任意に設定できます。

例（「コールバックでテキストを設定しています...」をコピーします）

<html>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="zc/ZeroClipboard.js"></script>
<button id="my-button">Copy to Clipboard</button>

<script language="JavaScript">

    ZeroClipboard.setDefaults({ moviePath: "zc/ZeroClipboard.swf" });

    var clip = new ZeroClipboard( $("button#my-button") );

    clip.on( 'dataRequested', function ( client, args ) {

        clip.setText("Setting the text in a callback...");

        // Don't make this mistake, alert seems to prevent it from working
        // alert("Clipboard should be set from click on " + this.id);
    });

    // Will never work
    // clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...

</script>
</body>
</html>

コールバックにアラートを貼り付けると、何らかの理由で機能しなくなるので、注意してください。

結論

したがって、3 つのすべての例で、copy イベントは flash オブジェクトのクリックによるものであることに注意してください。私の知る限り、ユーザーの操作なしで JavaScript からコピーする方法はありません。

詳細については、ZeroClipboard の手順を確認してください: https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

于 2013-11-21T10:49:12.017 に答える