jquery - DataTables 'Copy to Clipboard' (HTML5) 按钮不适用于 jQuery UI 对话框小部件

Question

我正在使用:

• jQuery v1.11.3
• 用于对话框小部件的 jQuery UI，v1.11.4
• 通过 CDN，分别为 DataTables 和 DataTables Button 扩展的 v1.10.9 和 v1.0.3。

在页面上，我有一个 jQuery UI 对话框小部件，它由用户手动启动。在 Dialog 内部是放置 DataTables 表和按钮 的地方。用户单击 “复制” 按钮，这将创建模态/类模态窗口，告诉用户按 Ctrl-C 将表格复制到剪贴板。

DataTables 有两个版本的 'Copy' 按钮，一个用于 Flash，另一个用于 HTML5。 Flash 工作正常，但主要是作为遗留浏览器的备用浏览器而设计的。 HTML5 是这里的问题所在。

阅读他们执行 HTML5 按钮的代码..它本质上做的是创建一个 textarea 元素，将表格数据复制到 textarea，然后它聚焦于 textarea 并选择它这样用户可以通过 Ctrl-C 进行复制。

问题是 textarea 没有获得焦点，甚至不能强制获得焦点，因为与 Dialog 小部件 有一些冲突。在不使用对话框小部件的情况下，“复制到剪贴板”功能可以正常工作。

在 Google Chrome 中，document.activeElement 位于 body 上。在 IE11 中，document.activeElement 位于 'Copy' 按钮上。我已经尝试了很多方法来迫使它专注于 textarea 但没有任何效果，包括 $(document.activeElement).blur() 然后是 $("textarea")[0] .focus().

代码如下:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.js"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $("#launchdialog").on("click", function( event ) {
            var dialog = $("#dialogModal")
                .dialog(
                {
                    height: $(window).height()*.40,
                    width: $(window).width()*.30,
                    modal: true,
                    autoOpen: true,
                    title: "test",
                    close: function(ev, ui) {
                        $(this).dialog( "destroy" ).empty();
                    }
                }
            )

            // Display table as DataTable
            var $table = $('#exampleDataTables').DataTable( {
                buttons: [
                    {
                        extend: "copyHtml5",
                        title: "copy"
                    }
                ]

            });

            // Place Buttons in existing Div tag
            $table.buttons().container()
                .appendTo( "#button-div-dialog" );          
        });
    });
</script>

<style>
    // Display 'Copy to Clipboard' modal above document and Dialog
    // z-index is to set to 21 by DataTables code and, therefore, is behind div overlay and Dialog widget 
    div.dt-button-info {
        z-index: 1000;
    }

    // Reveal 'Copy to Clipboard' textarea content for troubleshooting
    div.dt-button-info span div {
        height: 200px !important;
        width: 200px !important;
        overflow: scroll !important;
    }

    // Reveal 'Copy to Clipboard' textarea content for troubleshooting
    textarea {
        height: 200px;
        width: 200px;
    }
</style>

出于故障排除目的，我在 Google Chrome 中观察到，如果我打开对话框，然后删除 div 叠加层(它是使用对话框小部件创建的，因此用户无法单击对话框后面的任何地方)，以及开发人员工具栏，以及然后单击“复制”按钮，文本区域内容被选中。在 IE11 中，我无法使用相同的步骤重现相同的效果。

唯一有效的方法，也是一种粗略的解决方案，如下所示:

// User clicks on the 'Copy' button. Any event here always fires before
// the DataTables code does its thing. Thus, I use setInterval as a trick
// to have the code I want to execute fire after the DataTables code
// execution is done.
$("#dialogModal").on("click", "div span.ui-button-text", function( event ) {    
    var intervalID = setInterval(function() {
        if ( $("textarea").length !== 0) {
            // Since textarea exists, that means DataTables code has finished executing.

            // Hide Dialog trick (for IE) (Google Chrome works fine)
            $("div.ui-dialog").hide();

            // Since focus is no longer being hijacked by Dialog
            // due to some unknown conflict, I can now finally set focus to
            // the textarea element.
            $("textarea")[0].focus();

            // Display Dialog once more and select textarea contents
            $("div.ui-dialog").show();
            $("textarea")[0].select();      
            clearInterval(intervalID);
        } 
    }, 10); 
});

我不知道有什么方法可以在 DataTables 事件代码执行完毕后触发事件，而无需修改 DataTables 代码本身。所以，我使用 setInterval 来检查 textarea 是否存在。当它出现时，这意味着 DataTables 事件代码已完成。我现在可以使用 Google Chrome 选择它。对于 IE11，焦点被 Dialog 小部件劫持。我能想到的唯一解决方法是暂时隐藏对话框小部件，关注文本区域，然后再次显示对话框小部件。

对于IE11，我不能强制它专注于textarea。我在开发人员工具栏中尝试了很多东西，很多方法来取消设置和将焦点设置到文本区域，但没有任何效果。唯一起作用的是隐藏对话框小部件。

据我所知，此 Dialog/DataTables 冲突可能存在于其他 IE 版本中。到目前为止，我只测试了 Chrome 和 IE11。我坚信这是对话框小部件和/或 IE 的错误。

除了我在上面使用的解决方法之外，还有什么可以解决此 Dialog/DataTables 冲突的方法吗？

非常感谢。

Answer 1

我已经创建了一个纯 JavaScript 易于使用的替代方案，可以使用像 clip(text); ( github.com/Triforcey/clip-j ) 这样简单的命令复制到剪贴板。

这是源代码:

function clip(text) {
    var copyElement = document.createElement('input');
    copyElement.setAttribute('type', 'text');
    copyElement.setAttribute('value', text);
    copyElement = document.body.appendChild(copyElement);
    copyElement.select();
    document.execCommand('copy');
    copyElement.remove();
}