The problem that clipboard.js cannot be copied in the popup box

I found a bug a few days ago. In the pop-up box (dialog) of jquery-ui, the copy function implemented by clipboard.js will not take effect. I checked the relevant information later and found that not only the dialog of jquery-ui is not good, Other modal boxes, such as bootstrap's, will also not take effect. The reason is that the pop-up box will automatically focus, and the underlying implementation of copying is to obtain the selected content, which cannot be obtained after losing the focus, resulting in the failure of copying.

Solution:

1) For use in Bootstrap modal boxes (Modals), or in other class libraries that modify focus, you will want to set the focused element as  container the value of the property (online solution)

 

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

 

2) For the one I usejquery-ui的弹出框，我的做法是直接在代码中注释掉dialog相关的focus处理，从而成功解决该问题