1

HTML とテキストをコピーする機能を追加したい Web アプリがあります... クリップボードにコピーします。

それで、私は Zeroclipboard をいじりましたが、それを機能させることができませんでした。そして、それがもはやサポート/開発されていないことを発見しました。そこで、Zclip と呼ばれるフォークを使用しました。

2 つの div を渡すことができる単一の関数が必要でした...「テキストのコピー」と表示されている div/ボタンがどこにあり、テキストをコピーするターゲット div がどこにあったか。「アラート」を挿入して、どこまで到達したかを知らせたり、デバッグを試みたりしました。アラートは、適切な div / テキストを zclip に渡していることを示唆していました。しかし、クリップボードをチェックするたびに、テキストがありませんでした!

FF、IE、およびChromeでこれを試してください。

そこで、これを理解しようと、ファイルを削除し始めました。ここに私が持っているテストページがあります:

<html>
<head>
     <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>

 $(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        alert("SetCopyableDiv was called for:   click_div_id = " + click_div_id + "     source_div_id to copy = " + source_div_id);

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
            alert("Copy was pressed!");
            },
            afterCopy:function(){
                alert("Done with copy to clipboard!");
            }
        });
}); 

</script>
</head>
<body>

<div id="results" class="results">

<table class="data">
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr>
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
   </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
</table>

</div>

<button id="copy_results_table_to_CB">Copy to clipboard?</button>

</body>

私はこれのJSFiddleを持っています: http://jsfiddle.net/DR4296/V52eK/

奇妙なのは、「コピー」アラートがポップアップし、「コピー前」アラートが表示され、「コピー後」アラートが表示されないことです。これは、何かが本当に窒息していると思わせます。

何かご意見は？

4

1 に答える 1

0

alert()inハンドラーを削除すると、copy動作するはずです。

http://jsfiddle.net/V52eK/2/

$(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                //alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
                //alert("Copy was pressed!");
            },
            afterCopy:function(){
                //alert("Done with copy to clipboard!");
            }
        });
});
于 2014-03-19T14:48:38.100 に答える